/* Polices auto-hébergées (sous-ensemble latin, licence SIL OFL) */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/dm-sans-latin.woff2) format("woff2")}

/* Layout: header, a three-tile stats strip, the two towers centred at full height, the button. The UI accent (--acc) follows the brick being worked on. */
@property --acc{syntax:"<color>";inherits:true;initial-value:#EE3524}
:root{
  --acc:#EE3524; --bg:#F7F2F0; --glow3:rgba(140,130,255,.16);
  --glow1:color-mix(in srgb,var(--acc) 38%,transparent); --glow2:color-mix(in srgb,var(--acc) 20%,transparent);
  --surface:rgba(255,255,255,.62); --surface-solid:#FFFFFF; --ink:#26172E; --muted:#6E5A78; --line:rgba(80,40,90,.18);
  --hot1:color-mix(in oklab,var(--acc),#fff 22%); --hot2:var(--acc); --hot3:color-mix(in oklab,var(--acc),#000 20%); --on-hot:#FFFFFF;
  --red:#EE3524; --blue:#2F7DF0; --black:#251C2C; --green:#22AE66; --grey:#B9B1B5; --white:#FFF8F1; --gold:#FFBE1A;
  --shadow:rgba(90,30,80,.25);
  --f-display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bh:14px; --d:8px; --wt:36px; --wr:20px; --slab:#ECE3E6;
  transition:--acc 1.2s ease
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141017; --glow3:rgba(110,100,230,.14);
  --surface:rgba(40,28,58,.6); --surface-solid:#22182F; --ink:#F7EEFA; --muted:#B7A4C4; --line:rgba(255,255,255,.14);
  --black:#2B2333; --white:#F6EEE8; --shadow:rgba(0,0,0,.55); --slab:#2A2330; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141017; --glow3:rgba(110,100,230,.14);
  --surface:rgba(40,28,58,.6); --surface-solid:#22182F; --ink:#F7EEFA; --muted:#B7A4C4; --line:rgba(255,255,255,.14);
  --black:#2B2333; --white:#F6EEE8; --shadow:rgba(0,0,0,.55); --slab:#2A2330; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{color:var(--ink);font-family:var(--f-body);font-size:16px;-webkit-tap-highlight-color:transparent;background:var(--bg);overflow:hidden}
.aura{position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 30% at 18% 14%, var(--glow1), transparent 70%),
    radial-gradient(38% 32% at 88% 34%, var(--glow2), transparent 70%),
    radial-gradient(50% 34% at 40% 92%, var(--glow3), transparent 70%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,-3%) rotate(8deg) scale(1.06)}}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--hot2);outline-offset:2px}

.app{height:100%;max-width:520px;margin:0 auto;padding-inline:16px;padding-block:14px 18px;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-family:var(--f-display);font-weight:800;font-size:1.25rem;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
h1 i{width:26px;height:16px;border-radius:4px;position:relative;background:linear-gradient(135deg,var(--hot1),var(--hot2));box-shadow:0 4px 12px var(--shadow)}
h1 i::before{content:"";position:absolute;left:4px;right:4px;top:-4px;height:5px;border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,var(--hot1) 0 40%,transparent 40% 60%,var(--hot2) 60%)}
.icons{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Zone principale : les tours à gauche (pleine hauteur), le compteur à droite */
/* Bandeau de stats : trois cases égales, barre de progression collée en bas */
.stats{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stat{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding-inline:6px;text-align:center}
.stat + .stat{border-left:1px solid var(--line)}
.stat b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,6vw,1.7rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
.stat:first-child b{color:var(--acc)}
.stat span{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--line)}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hot1),var(--hot2));box-shadow:0 0 10px var(--hot2);transition:width .8s cubic-bezier(.2,.8,.2,1)}

.stage{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;align-items:center}
.stage::-webkit-scrollbar{display:none}
.scene{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;padding-top:8px;padding-bottom:calc(var(--d) * 1.6 + 4px);padding-right:calc(var(--d) * 1.6 + 22px)}
.towers{display:flex;align-items:flex-end;gap:calc(var(--d) + var(--wr) * .9);position:relative;z-index:1;margin-left:calc(var(--d) * .8)}
.tower{display:flex;flex-direction:column;position:relative}
.tower.track{width:var(--wt)}
.tower.ref{width:var(--wr)}

/* Brique 3D : face avant + flanc droit (::after) + dessus (.cap::before) + tenons (.studs) */
.brick{height:var(--bh);background-color:var(--c);position:relative;border-radius:3px 0 0 3px;
  background-image:
    radial-gradient(140% 110% at 22% 0%,rgba(255,244,228,.55),rgba(255,244,228,0) 55%),
    linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(70,10,30,.3) 100%),
    linear-gradient(90deg,rgba(255,238,220,.2),rgba(255,255,255,0) 24%,rgba(0,0,0,0) 76%,rgba(60,10,30,.14));
  box-shadow:inset 0 1.5px 1px rgba(255,246,235,.7),inset 1px 0 1px rgba(255,246,235,.3),inset 0 -2px 2px rgba(60,10,30,.38)}
.brick::after{content:"";position:absolute;left:100%;top:0;width:var(--d);height:100%;transform-origin:0 0;transform:skewY(-45deg);border-radius:0 2px 2px 0;
  background-color:var(--c);background-image:linear-gradient(180deg,rgba(60,10,30,.2),rgba(60,10,30,.44));
  box-shadow:inset 0 -2px 2px rgba(50,5,25,.35),inset 1px 0 1px rgba(255,240,225,.22)}
.brick.cap::before{content:"";position:absolute;left:0;bottom:100%;width:100%;height:var(--d);transform-origin:0 100%;transform:skewX(-45deg);border-radius:3px 3px 0 0;
  background-color:var(--c);background-image:linear-gradient(0deg,rgba(255,240,225,.25),rgba(255,244,232,.55))}
.studs{position:absolute;left:calc(var(--d) * .5);right:calc(var(--d) * -.5);bottom:calc(100% + var(--d) * .25);display:flex;justify-content:space-evenly;pointer-events:none;z-index:2}
.studs i{width:30%;height:calc(var(--d) * .45);border-radius:0 0 50% 50% / 0 0 100% 100%;position:relative;
  background-color:var(--c);background-image:linear-gradient(90deg,rgba(255,240,225,.45),rgba(255,255,255,.1) 45%,rgba(60,10,30,.3))}
.ref .studs i{width:56%}
.studs i::before{content:"";position:absolute;left:0;right:0;top:calc(var(--d) * -.38);height:calc(var(--d) * .75);border-radius:50%;
  background-color:var(--c);background-image:radial-gradient(70% 80% at 35% 35%,rgba(255,250,240,.8),rgba(255,244,232,.25) 75%)}
.brick.gone{background-color:color-mix(in srgb,var(--c) 12%,transparent);background-image:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--c) 26%,transparent),inset 1px 0 0 color-mix(in srgb,var(--c) 22%,transparent)}
.brick.gone::after{background-color:color-mix(in srgb,var(--c) 7%,transparent);background-image:none;box-shadow:none}
.brick.gone.cap::before{background-color:color-mix(in srgb,var(--c) 15%,transparent);background-image:none;box-shadow:none}
.track .brick.top{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{filter:brightness(1.12) drop-shadow(0 0 10px color-mix(in srgb,var(--c) 70%,transparent))}}
.brick.back{animation:back .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes back{from{transform:translateY(-44px) scale(1.05);opacity:0}}
.ref .brick.mark{border-top:max(2px,calc(var(--bh) * .2)) solid var(--black)}
.ref .brick.mark::after{background-image:linear-gradient(var(--black) 0 max(2px,calc(var(--bh) * .2)),rgba(60,10,30,.2) 0,rgba(60,10,30,.44))}
.flag{align-self:center;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--hot2);margin-bottom:calc(var(--d) + 6px);transform:translateX(calc(var(--d) * .5));filter:drop-shadow(0 0 6px var(--hot2))}
.plate{position:relative;z-index:0;width:calc(var(--wt) + var(--wr) + var(--d) * 2.6 + var(--wr) * .9);height:10px;
  background-color:var(--slab);background-image:linear-gradient(90deg,color-mix(in srgb,var(--hot1) 22%,transparent),color-mix(in srgb,var(--hot3) 22%,transparent));
  box-shadow:0 0 18px -2px color-mix(in srgb,var(--hot2) 60%,transparent),0 18px 30px -12px var(--shadow)}
.plate::before{content:"";position:absolute;left:0;bottom:100%;width:100%;height:calc(var(--d) * 1.6);transform-origin:0 100%;transform:skewX(-45deg);
  background-color:var(--slab);background-image:linear-gradient(0deg,rgba(255,255,255,.08),rgba(255,255,255,.32));box-shadow:inset 0 -1.5px 0 color-mix(in srgb,var(--hot2) 70%,transparent)}
.plate::after{content:"";position:absolute;left:100%;top:0;width:calc(var(--d) * 1.6);height:100%;transform-origin:0 0;transform:skewY(-45deg);
  background-color:var(--slab);background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.35))}
.crack{position:absolute;inset:0;width:100%;height:100%;color:rgba(0,0,0,.65);z-index:1}
.brick[data-k="black"] .crack{color:rgba(255,255,255,.8)}
.crack path{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke}

.cta{height:60px;border:0;border-radius:99px;color:var(--on-hot);font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:.01em;
  background:linear-gradient(110deg,var(--hot1),var(--hot2) 55%,var(--hot3));background-size:160% 100%;
  box-shadow:0 10px 28px -6px var(--hot2),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s, background-position .4s}
.cta:hover{background-position:100% 0}
.cta:active{transform:scale(.97)}

.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:min(92vw,420px);
  background:var(--surface-solid);color:var(--ink);border:1px solid var(--line);padding:14px 20px;border-radius:18px;font-weight:700;text-align:center;
  box-shadow:0 16px 40px -10px var(--shadow);transition:opacity .3s, transform .3s;z-index:30}
.toast.off{opacity:0;transform:translate(-50%,12px);pointer-events:none}

.sheet-wrap{position:fixed;inset:0;background:rgba(20,8,30,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{width:100%;max-width:520px;max-height:85%;overflow:auto;background:var(--surface-solid);border-radius:28px 28px 0 0;
  padding-inline:22px;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;box-shadow:0 -20px 50px -20px var(--shadow)}
.sheet h2{font-family:var(--f-display);font-weight:800;font-size:1.25rem;margin:0}
.sheet::before{content:"";align-self:center;width:42px;height:5px;border-radius:99px;background:var(--line);margin-top:-8px;flex:none}
.field input.big{font-family:var(--f-display);font-size:1.6rem;font-weight:600}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;font-size:.95rem;line-height:1.4;color:var(--muted)}
.steps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);font-family:var(--f-display);font-weight:800;font-size:.8rem}
.steps b{color:var(--ink)}
.ms{position:absolute;left:calc(100% + var(--d) + 8px);bottom:0;transform:translateY(50%);font-style:normal;font-size:.66rem;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ms.half{color:var(--acc)}
.moment{position:fixed;inset:0;z-index:35;display:grid;place-items:center;padding-inline:24px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.moment-card{width:100%;max-width:360px;background:var(--surface-solid);border:1px solid var(--line);border-radius:28px;padding:30px 24px 22px;text-align:center;
  display:flex;flex-direction:column;gap:8px;box-shadow:0 30px 60px -20px var(--shadow);animation:pop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.m-big{font-family:var(--f-display);font-weight:800;font-size:3.6rem;line-height:1.05;letter-spacing:-.04em;color:var(--acc);font-variant-numeric:tabular-nums}
.m-sub{font-family:var(--f-display);font-weight:600;font-size:1.05rem;text-wrap:balance}
.m-txt{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;text-wrap:pretty}
.m-prog{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-block:8px 6px}
.sheet p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-weight:700;font-size:.85rem;color:var(--muted)}
.field input{height:54px;border-radius:16px;border:1.5px solid var(--line);background:transparent;padding-inline:16px;font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:0;width:100%}
.field input:focus{border-color:var(--hot2);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--hot2) 20%,transparent)}
.row{display:flex;gap:10px}
.row>*{flex:1}
.btn{height:52px;border-radius:99px;border:1.5px solid var(--line);background:transparent;font-weight:700}
.btn.primary{border:0;color:var(--on-hot);background:linear-gradient(110deg,var(--hot1),var(--hot2));box-shadow:0 8px 20px -8px var(--hot2)}
.btn.danger{color:var(--red);border:0;height:auto;padding:6px;font-size:.85rem;font-weight:600;align-self:center}
.err{color:var(--red);font-weight:700;font-size:.9rem;min-height:1.2em}

.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding-block:12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.hist .d{font-weight:700}
.hist .b{color:var(--muted);font-size:.85rem}
.hist .w{font-weight:700}
.hist .link{align-self:center;padding:8px 0 8px 4px}
.hist .delta{display:inline-block;padding:2px 8px;border-radius:99px;font-weight:700;font-size:.78rem;margin-right:6px;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.hist .delta.up{background:var(--line);color:var(--muted)}
.seg{display:flex;gap:4px;padding:4px;border:1.5px solid var(--line);border-radius:99px}
.seg button{flex:1;height:42px;border:0;border-radius:99px;background:transparent;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--on-hot)}
.field input[readonly]{color:var(--muted);background:var(--line);border-color:transparent}
.link{align-self:flex-start;border:0;background:none;padding:0;color:var(--acc);font-weight:700;font-size:.85rem;text-align:left}
.warn{font-size:.85rem;color:var(--muted);line-height:1.45}
.empty{color:var(--muted);text-align:center;padding-block:20px}
.sheet{animation:up .32s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}}
.sheet.dragging{transition:none}
.sheet.settle{transition:transform .25s cubic-bezier(.2,.9,.3,1)}

/* Courbe de tendance (historique) */
.trend{display:flex;flex-direction:column;gap:8px}
.trend-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trend-head h3{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.trend-head b{font-family:var(--f-display);font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums}
.trend-box{position:relative}
.trend svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.trend .grid{stroke:var(--line);stroke-width:1}
.trend .axis{fill:var(--muted);font-size:10px;font-family:var(--f-body);font-variant-numeric:tabular-nums}
.trend .area{fill:color-mix(in srgb,var(--acc) 14%,transparent)}
.trend .line{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trend .raw{fill:color-mix(in srgb,var(--muted) 45%,transparent)}
.trend .end{fill:var(--acc);stroke:var(--surface-solid);stroke-width:2}
.trend .cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.trend .tip{position:absolute;top:0;transform:translateX(-50%);pointer-events:none;background:var(--ink);color:var(--surface-solid);
  font-size:.75rem;font-weight:700;padding:5px 9px;border-radius:9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.trend p{margin:0;font-size:.8rem;color:var(--muted)}

canvas#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
@media (prefers-reduced-motion: reduce){.brick.back,.track .brick.top,.aura{animation:none}.toast,.bar span,.cta{transition:none}}

/* ——— Production : base (ce que la page d'artefact fournissait), connexion, synchro ——— */
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}

.head-right{display:flex;align-items:center;gap:8px}
.pending{font-size:.7rem;font-weight:700;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);white-space:nowrap}

.login{height:100%;max-width:420px;margin:0 auto;padding-inline:24px;padding-block:24px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.login .logo{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.login .logo i{width:64px;height:40px;border-radius:10px;position:relative;background:linear-gradient(135deg,var(--hot1),var(--hot2));box-shadow:0 10px 24px -8px var(--hot2)}
.login .logo i::before{content:"";position:absolute;left:9px;right:9px;top:-9px;height:11px;border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--hot1) 0 34%,transparent 34% 66%,var(--hot2) 66%)}
.login h1{font-size:1.6rem}
.login p{margin:0;color:var(--muted);text-align:center}
.login form{display:flex;flex-direction:column;gap:12px}
.login .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem}
.login .or::before,.login .or::after{content:"";flex:1;height:1px;background:var(--line)}
.login .cta{width:100%}

.account{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.account .line{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9rem}
.account .line span{color:var(--muted)}