@font-face{font-family:"Inter Tight";src:url("/assets/fonts/InterTight.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2192}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2192}

body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");background-size:160px 160px}
@media (prefers-reduced-data:reduce){body::after{display:none}}

html,body{background:var(--bg);color:var(--ink)}
body{font:var(--t-body);-webkit-font-smoothing:antialiased}

h1,h2,h3,.ph-h1,.ph-kick,.sec,.hm-hi{font-family:var(--f-display)}
.ph-h1{font:var(--t-display);letter-spacing:var(--ls-h1)}
h2{font:var(--t-title);letter-spacing:var(--ls-title)}
.sec{font:var(--t-section);letter-spacing:-.025em;text-transform:none;margin:var(--s4) 0 var(--s2)}
.ph-kick{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--ink3)}
.tiny,.ph-foot{font:var(--t-micro);color:var(--ink3)}
.muted{color:var(--ink3)}
label{font:var(--t-label);color:var(--ink2);text-transform:none;letter-spacing:0}
.dot{color:var(--brand)}

.card,.k-banner,.ph-set,.hm-card,.hm-short,.hm-tile{border:0!important;box-shadow:var(--e1);background:var(--surface);border-radius:var(--r-l)}
.card{padding:var(--s4)}
.ph-set{border-radius:var(--r-m);padding:var(--s3) var(--s4)}

.btn{min-height:44px;border:0;border-radius:var(--r-full);font:var(--t-label);transition:transform var(--spring),background var(--spring)}
.btn:active,.chip:active,.hm-short:active,.ph-set:active,.hm-cta:active,.hm-tile:active{transform:scale(.975)}
.btn:disabled{opacity:.45;transform:none}
.btn:focus-visible,.chip:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-p{background:var(--brand);color:var(--on-brand);box-shadow:0 2px 0 var(--brand-lo);min-height:52px;font-weight:550}
.btn-g,.btn-s{background:var(--surface2);color:var(--ink);box-shadow:none}
.btn-sm{min-height:34px;padding:0 var(--s4);font-size:11.5px}

/* accueil */
.hm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.hm-top .brand{width:22px;height:22px}
.hm-hi{font:var(--t-h1);letter-spacing:var(--ls-h1);margin:0 0 var(--s4)}
.hm-hero{background:var(--hero-grad);border-radius:var(--r-l);padding:var(--s4);color:var(--on-brand);position:relative;overflow:hidden}
.hm-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 92% 6%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%);pointer-events:none}
.hm-kick{font-size:10px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:color-mix(in srgb,var(--on-brand) 80%,transparent);position:relative}
.hm-hero-t{font:var(--t-hero);letter-spacing:var(--ls-hero);color:var(--on-brand);margin:var(--s1) 0 var(--s1);position:relative}
.hm-meta{display:flex;gap:var(--s2);font-size:10.5px;color:color-mix(in srgb,var(--on-brand) 80%,transparent);position:relative}
.hm-cta{display:grid;place-items:center;min-height:48px;border-radius:var(--r-full);background:var(--on-brand);color:var(--brand-lo);font:var(--t-label);font-weight:600;text-decoration:none;margin-top:var(--s4);position:relative;transition:transform var(--spring)}

.hm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:var(--s3) 0}
.hm-tile{background:var(--surface2);border-radius:18px;padding:9px 6px;text-align:center;box-shadow:var(--e1)}
.hm-tile b{display:block;font-size:11.5px;font-variant-numeric:tabular-nums;margin-top:6px}
.hm-tile span{display:block;font-size:9.5px;color:var(--ink3);margin-top:5px}
.ring{display:block;margin:0 auto;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring .track{stroke:var(--line)}
.ring .val{stroke:var(--brand);transition:stroke-dashoffset var(--spring)}

.hm-line{display:flex;align-items:center;gap:9px;background:var(--surface2);border-radius:16px;padding:10px 11px;box-shadow:var(--e1);margin-bottom:8px;text-decoration:none;color:var(--ink)}
.hm-line .g{flex:1;min-width:0}
.hm-line b{font-size:12px;display:block}
.hm-line small{font-size:10px;color:var(--ink3)}
.hm-line .go{color:var(--brand);font-weight:700}

/* barre d'onglets flottante */
.tabbar{position:fixed;left:var(--s2);right:var(--s2);bottom:calc(var(--safe-b) + var(--s2));margin:0;display:flex;gap:2px;
  padding:5px;border:0;border-radius:var(--r-full);background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--e2);z-index:40}
.tabbar a{flex:1;display:grid;place-items:center;min-height:44px;border-radius:var(--r-full);color:var(--ink3);position:relative}
.tabbar a.on{background:var(--brand);color:var(--on-brand)}
.tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabbar .bd{position:absolute;top:5px;right:calc(50% - 15px);min-width:14px;height:14px;border-radius:7px;background:var(--brand);
  color:var(--on-brand);font-size:9px;font-weight:700;display:grid;place-items:center;padding:0 3px}
.tabbar a.on .bd{background:var(--on-brand);color:var(--brand)}
.view{padding:0 var(--gutter) calc(var(--safe-b) + 92px)}

.topbar{padding:max(calc(var(--safe-t) + 12px),59px) var(--gutter) var(--s2);display:flex;align-items:center;gap:var(--s2);background:var(--bg)}
.topbar h1{font:var(--t-title);letter-spacing:var(--ls-title)}
.topbar .brand{width:22px;height:22px}
.topbar .av{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-size:11px;font-weight:650}

.sheet-pane{border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--e3);background:var(--surface);padding-bottom:calc(var(--safe-b) + var(--s4))}
.sheet-bg{background:rgba(0,0,0,.35)}
.grab{width:34px;height:4px;border-radius:2px;background:var(--ink4);margin:var(--s3) auto}

.toast{background:var(--ink);color:var(--bg);border-radius:var(--r-full);font:var(--t-label);padding:var(--s3) var(--s5);box-shadow:var(--e3);bottom:calc(var(--safe-b) + 92px)}

.k-banner{border-radius:var(--r-m);background:var(--surface2);color:var(--ink3);box-shadow:none}
.k-banner b{color:var(--ink)}
.k-err,.k-err b{color:var(--danger)}
.rest,.calm,.k-warn{background:var(--surface2);color:var(--ink2);border:0}

.field,input[type="search"],select.field,textarea.field{background:var(--surface2);border:0;border-radius:var(--r-s);min-height:44px;font:var(--t-body);color:var(--ink);padding:0 var(--s3)}
textarea.field{padding:var(--s2) var(--s3)}
.field:focus,input:focus,select:focus,textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--brand)}

.chip{background:var(--surface2);border:0;border-radius:var(--r-full);min-height:34px;padding:0 var(--s3);font:var(--t-label);color:var(--ink2)}
.chip.on{background:var(--ink);color:var(--bg)}

/* nutrition */
.nut-sug{display:grid;gap:6px;margin:0 0 var(--s3)}
.nut-sug-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;border-radius:16px;background:var(--surface2);padding:10px 11px;min-height:44px;color:var(--ink);box-shadow:var(--e1)}
.nut-sug-i span{flex:1;font-size:11.5px;line-height:1.3}
.nut-sug-i small{font-size:10px;color:var(--ink3)}
.nut-sug-i b{color:var(--brand);font-size:14px}

/* messages */
.chats{display:grid;gap:6px}
.msg{max-width:82%;padding:9px 11px;border-radius:16px;background:var(--surface2);font-size:12.5px;line-height:1.45;box-shadow:var(--e1)}
.msg.me{background:var(--brand);color:var(--on-brand);margin-left:auto}
.msg small{display:block;font-size:9.5px;color:var(--ink3);margin-top:3px}
.msg.me small{color:color-mix(in srgb,var(--on-brand) 70%,transparent)}

/* photos */
.ph-reticle{border:0;box-shadow:var(--e1);background:color-mix(in srgb,var(--brand-lo) 55%,transparent)}
.ph-pick.on,.ph-snap{color:var(--on-brand)}

/* marque */
.brand{display:inline-block;background:currentColor;width:22px;aspect-ratio:1/1;color:var(--brand);flex:none;
  -webkit-mask:url("/assets/brand/mark.svg") center/contain no-repeat;mask:url("/assets/brand/mark.svg") center/contain no-repeat}
.brand-head{display:flex;justify-content:center;padding:var(--s3) 0 var(--s5)}
.brand-head img{height:44px;width:auto;display:block;background:var(--bg);padding:7px;border-radius:14px}
[data-theme="dark"] .brand-head img{background:#F7F6F3}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:120ms!important;animation-duration:120ms!important}
  .btn:active,.chip:active{transform:none}
}