/* Lieno – app styles. Brand charter: dark green #075B46, light green #75A843; status and role colours from the spec. */
:root{
  --g:#075B46; --gl:#75A843; --white:#FFFFFF; --bg:#F3F5F4; --ink:#26332F; --mut:#66736E; --line:#E1E7E4;
  --ok:#218653; --info:#2878C8; --wait:#F5A623; --bad:#D93636; --off:#A6AEAA;
  --c-client:#D6587A; --c-ouvrier:#075B46; --c-patron:#164A70;
  --font-display:"Outfit","Segoe UI",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{background:#E7ECE9; color:var(--ink); font-family:var(--font-body); font-size:15px; -webkit-tap-highlight-color:transparent}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible{outline:2px solid var(--gl); outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}

#app{position:relative; max-width:520px; margin:0 auto; height:100dvh; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; box-shadow:0 0 40px rgba(7,40,30,.12)}
.content{flex:1; overflow-y:auto; padding:10px 16px 24px; display:flex; flex-direction:column; gap:14px}
.content > *, .ob-pad > *, .sheet > *, .rest > *{flex-shrink:0}
.ico{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ico.f{fill:currentColor; stroke:none}

.ah{flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(8px + env(safe-area-inset-top,0px)) 16px 10px; background:var(--white); border-bottom:1px solid var(--line)}
.ah .r{display:flex; gap:6px; align-items:center}
.ah .chname{display:flex; align-items:center; gap:4px; font-weight:700; font-size:13px; color:var(--mut); max-width:36vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.icon-btn{position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:50%}
.icon-btn:hover{background:var(--bg)}
.icon-btn.danger{color:#B42828}
.switch{width:44px; height:26px; border-radius:13px; background:#C9D3CE; position:relative; flex:none; transition:background .2s}
.switch i{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--g)} .switch.on i{left:21px}
.badge{position:absolute; top:3px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; border:2px solid var(--white)}
.ah.sub{justify-content:flex-start; gap:6px}
.ah.sub h2{margin:0; font-family:var(--font-display); font-size:18px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ah.sub .sub-meta{font-size:11.5px; color:var(--mut)}

.logo{display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em}
.logo .b{color:var(--g)} .logo .l{color:var(--gl)}

.nav{flex:none; display:grid; grid-template-columns:repeat(4,1fr); background:var(--white); border-top:1px solid var(--line); padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px))}
.nav button{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; font-weight:600; color:var(--mut); padding:4px 0; position:relative}
.nav button .pill{width:46px; height:30px; display:grid; place-items:center; border-radius:12px}
.nav button.on{color:var(--g)} .nav button.on .pill{background:var(--g); color:#fff}
.nav .badge{top:-1px; right:calc(50% - 28px)}
.nav button.lockd{opacity:.45}

h1.t{margin:0; font-family:var(--font-display); font-weight:600; font-size:23px; letter-spacing:-.01em; text-wrap:balance}
.sec{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:-6px}
.sec h3{margin:0; font-family:var(--font-display); font-size:16px; font-weight:600}
.sec button{font-size:13px; font-weight:600; color:var(--g)}
.mut{color:var(--mut)} .sm{font-size:12.5px}
p{margin:0; line-height:1.45}

.card{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:14px}
.card.flat{padding:0; overflow:hidden}
.chcard{display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center}
.chcard .thumb{width:86px; height:70px; border-radius:10px; overflow:hidden}
.chcard .thumb svg{width:100%; height:100%; display:block}
.chcard b{font-family:var(--font-display); font-size:17px; font-weight:600; display:block}
.prog{display:flex; align-items:center; gap:10px; margin-top:12px}
.bar{flex:1; height:8px; border-radius:6px; background:#E3EAE6; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg, var(--g), var(--gl)); border-radius:6px}
.prog b{font-variant-numeric:tabular-nums; font-size:13px}

.row{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 14px; width:100%; text-align:left; border-top:1px solid var(--line); color:inherit; text-decoration:none}
.row:first-child{border-top:0}
button.row:hover, a.row:hover{background:#FAFBFA}
.row .ri{width:36px; height:36px; border-radius:11px; display:grid; place-items:center}
.row .ri .ico{width:19px; height:19px}
.row b{display:block; font-weight:600; font-size:15px}
.row .s{display:block; font-size:12.5px; color:var(--mut); margin-top:1px; overflow-wrap:anywhere}
.row .rt{display:flex; align-items:center; gap:6px; color:var(--mut); font-size:12px}
.row .rt .ico{width:16px; height:16px}

.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.nodot::before{display:none}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 18px; border-radius:12px; font-weight:700; font-size:15px; width:100%; text-decoration:none}
.btn .ico{width:19px; height:19px}
.btn.pri{background:var(--g); color:#fff} .btn.pri:hover{background:#06503D}
.btn.sec{background:var(--white); border:1.5px solid var(--line); color:var(--ink)}
.btn.soft{background:#E5F0EA; color:var(--g)}
.btn.red{background:#FCE8E8; color:#B42828}
.btn.blue{background:var(--c-patron); color:#fff}
.btn.sm{height:40px; font-size:14px; border-radius:10px}
.btn[disabled]{opacity:.5; cursor:wait}
.btns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.big-alert{height:56px; font-size:15.5px; border-radius:14px}
.linkbtn{font-weight:700; color:var(--g); font-size:14px}

.big3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.big{background:var(--g); color:#fff; border-radius:18px; padding:16px 6px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; min-height:116px; transition:transform .1s}
.big > span{width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center}
.big .ico{width:27px; height:27px}
.big small{font-size:10.5px; font-weight:500; opacity:.8; margin-top:-6px}
.big.red{background:#C62F2F}
.big:active{transform:scale(.96)}
[data-hold]{touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}

.qgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.qa{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:7px; font-weight:600; font-size:13.5px; text-align:center}
.qa .ico{width:24px; height:24px; color:var(--g)}
.qa small{font-size:11px; font-weight:500; color:var(--mut); margin-top:-5px}
.qa:hover{border-color:var(--gl)}

.steps .st{display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:9px 2px; width:100%; text-align:left}
.dot{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:#fff}
.dot .ico{width:13px; height:13px; stroke-width:3}
.dot.hollow{border:2px solid var(--off); background:#fff}
.st b{font-weight:600}
.st .d{font-size:12px; color:var(--mut)}

.av{border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-weight:700; flex:none; font-family:var(--font-display)}

.ph-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ph{aspect-ratio:1/1; max-width:100%; border-radius:12px; overflow:hidden; background:#dfe6e2; display:block; position:relative}
.ph img{width:100%; height:100%; object-fit:cover; display:block}
.ph-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ph-card{display:flex; flex-direction:column; gap:5px; text-align:left}
.ph-card b{font-size:12.5px; font-weight:600; line-height:1.3}
.ph-card span{font-size:11px; color:var(--mut)}

.hero-day{border-radius:18px; padding:16px; color:#fff; background:linear-gradient(135deg, #075B46 0%, #0E6E52 55%, #5E9A3B 140%); display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden}
.hero-day small{opacity:.8; font-size:12px}
.hero-day h2{margin:0; font-family:var(--font-display); font-size:21px; font-weight:600}
.hero-day q{font-size:14.5px; line-height:1.45; quotes:"« " " »"}

.enc{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; background:#FFF7E6; border:1px solid #F7DCA6; border-radius:14px; padding:12px}
.enc .em{font-size:30px; line-height:1}

.note{border-radius:12px; padding:10px 12px; font-size:13px; line-height:1.45; display:flex; gap:8px; align-items:flex-start}
.note .ico{width:17px; height:17px; margin-top:1px}
.note.info{background:#E6F0FA; color:#1D5A96}
.note.warn{background:#FEF3DF; color:#8A5300}
.note.bad{background:#FCE8E8; color:#A62626}
.note.ok{background:#E3F3EA; color:#17663E}
.note.lock{background:#EEF0EF; color:#4A5550}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13.5px; margin:0}
.kv dt{color:var(--mut)} .kv dd{margin:0; font-weight:600; overflow-wrap:anywhere}

.tl{display:flex; flex-direction:column}
.tl .ti{display:grid; grid-template-columns:18px 1fr; gap:10px; position:relative; padding-bottom:12px}
.tl .ti::before{content:""; position:absolute; left:8px; top:16px; bottom:0; width:2px; background:var(--line)}
.tl .ti:last-child::before{display:none}
.tl .ti i{width:18px; height:18px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--line); margin-top:1px}
.tl .ti p{font-size:13.5px} .tl .ti span{font-size:11.5px; color:var(--mut)}

.card.todo{display:flex; flex-direction:column; gap:10px; border-color:#F7DCA6; background:#FFFBF2}
.tq{font-family:var(--font-display); font-size:17px; font-weight:600}
.todo-row{display:grid; grid-template-columns:auto 1fr; gap:10px 12px; padding:12px 14px; border-top:1px solid var(--line); align-items:center}
.todo-row:first-child{border-top:0}
.todo-row .tx{min-width:0}
.todo-row .tx b{display:block; font-weight:600}
.todo-row .tx span{display:block; font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.todo-row .acts{grid-column:1 / -1; display:flex; gap:8px}
.todo-row .acts .btn{flex:1}
.todo-row .ri{width:36px; height:36px; border-radius:11px; display:grid; place-items:center}
.cnt{display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:11px; background:var(--bad); color:#fff; font-size:12px; padding:0 6px; vertical-align:2px; font-family:var(--font-body)}
.card.hrs{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center}
.ri.ok{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#E3F3EA; color:#218653}

/* messages */
.conv-last{display:block; font-size:12.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw}
.ub{min-width:20px; height:20px; border-radius:10px; background:var(--g); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; padding:0 6px}
.thread{flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:var(--bg)}
.msg{display:flex; gap:8px; align-items:flex-end; max-width:86%}
.msg.mine{align-self:flex-end; flex-direction:row-reverse}
.bub{background:var(--white); border:1px solid var(--line); border-radius:16px 16px 16px 4px; padding:8px 11px; font-size:14.5px; line-height:1.4; display:flex; flex-direction:column; gap:4px; min-width:0; overflow-wrap:anywhere}
.msg.mine .bub{background:var(--g); color:#fff; border-color:var(--g); border-radius:16px 16px 4px 16px}
.bub .who{font-size:11px; font-weight:700; color:var(--mut)}
.bub time{font-size:10.5px; opacity:.65; align-self:flex-end}
.bub img{border-radius:10px; max-width:220px; display:block}
.bub audio{width:220px; max-width:100%; height:36px}
.composer{flex:none; display:flex; gap:8px; align-items:center; padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--white); border-top:1px solid var(--line)}
.composer input{flex:1; min-width:0; height:42px; border-radius:21px; border:1px solid var(--line); background:var(--bg); padding:0 14px; font:inherit; color:var(--ink)}
.cbtn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--mut)}
.cbtn.go{background:var(--g); color:#fff}
.cbtn.mic{background:#E5F0EA; color:var(--g)}
.privacy{display:flex; align-items:center; gap:6px; padding:6px 14px; font-size:11.5px; color:var(--mut); background:#F8FAF9; border-bottom:1px solid var(--line)}
.privacy .ico{width:13px; height:13px}

/* forms */
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:13px; font-weight:600; color:var(--mut)}
.inp{position:relative; display:flex; align-items:center}
.inp .ico{position:absolute; left:13px; color:var(--mut); width:18px; height:18px}
.inp input, .field select, .field textarea, .field > input{width:100%; height:48px; border-radius:12px; border:1px solid var(--line); background:var(--white); padding:0 14px; font:inherit; color:var(--ink)}
.inp input{padding-left:40px}
.pwd{position:relative}
.pwd input{width:100%; height:48px; border-radius:12px; border:1px solid var(--line); background:var(--white); padding:0 96px 0 14px; font:inherit; color:var(--ink)}
.pwd-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); height:36px; padding:0 12px; border:0; border-radius:9px; background:#EEF2F0; color:var(--g); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.field textarea{height:auto; min-height:84px; padding:10px 14px; resize:vertical}
.check{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.4}
.check input{width:20px; height:20px; accent-color:var(--g); margin:0; flex:none}
.rules{list-style:none; padding:0; margin:0; display:grid; gap:4px; font-size:12.5px; color:var(--mut)}
.rules li{display:flex; gap:6px; align-items:center}
.rules li .ico{width:14px; height:14px}
.rules li.ok{color:var(--ok)}
.emojis{display:flex; gap:8px; flex-wrap:wrap}
.emojis button{width:52px; height:52px; border-radius:14px; border:1.5px solid var(--line); font-size:26px; background:var(--white)}
.emojis button.on{border-color:var(--g); background:#E5F0EA}
.aud{display:grid; gap:10px}
#search-res mark{background:#FDEBB3; color:inherit; border-radius:3px; padding:0 1px}
/* « Ma journée »: the trade's tool fills as the three gestures are done */
.daily{display:grid; gap:12px}
.daily .dl-top{display:flex; gap:12px; align-items:center}
.daily .dl-top b{display:block; font-family:var(--font-display, inherit); font-size:17px}
.tool{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; position:relative; background:conic-gradient(var(--g) calc(var(--p) * 1%), #E3EAE6 0)}
.tool::before{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--white); transition:background .3s}
.tool .ico{position:relative; width:24px; height:24px; color:#8E9B95; transition:color .3s}
.daily.done .tool::before{background:var(--g)}
.daily.done .tool .ico{color:#fff}
.tool.pop{animation:toolpop .7s ease}
@keyframes toolpop{0%{transform:scale(.85)} 55%{transform:scale(1.14)} 100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .tool.pop{animation:none} }
.gestes{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.g{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px; border-radius:12px; border:1.5px solid var(--line); background:var(--white); text-align:left; min-width:0}
.g .ico{width:20px; height:20px; color:var(--g)}
.g b{display:block; font-size:13px; line-height:1.2}
.g small{font-size:11.5px; color:var(--mut)}
.g.ok{background:#E3F3EA; border-color:#BFDCCB}
.thanks{display:flex; gap:6px; align-items:center; font-size:13px; font-weight:600; color:#17663E; margin:0}
.thanks .ico{width:16px; height:16px}
.tools{display:flex; gap:4px; flex-shrink:0}
.ts,.tw{width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; background:#E9EEEB; color:#8E9B95; flex-shrink:0}
.ts .ico,.tw .ico{width:15px; height:15px}
.ts.on,.tw.on{background:var(--g); color:#fff}
.tw{width:22px; height:22px; margin-right:6px; vertical-align:-5px}
.tw .ico{width:13px; height:13px}
.thank-row{display:flex; align-items:center; gap:12px}
.thank-row > div{flex:1}
.thank-row b{display:block; font-size:14px}
.thank-row .tw{width:34px; height:34px; margin:0}
.thank-row .tw .ico{width:18px; height:18px}
.thank-row .btn{width:auto; flex-shrink:0}
.sos-btn{height:30px; padding:0 10px; border-radius:99px; background:#D93636; color:#fff; font-weight:800; font-size:12px; letter-spacing:.06em; flex-shrink:0}
.sos-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.sos-call{display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:12px; background:#FCE8E8; color:#A62626; text-decoration:none; min-width:0}
.sos-call b{font:800 22px var(--font-display)}
.sos-call span{font-size:12px; color:#7A2A2A}
.sos-ban{display:grid; gap:6px; background:#D93636; border-color:#D93636; color:#fff}
.sos-ban .sm{color:#FFE3E3}
.sos-ban .btns{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sos-ban .btn{width:auto}
.certif{display:grid; gap:4px; padding:12px; border-radius:12px; background:#E3F3EA; font-size:12.5px; color:#2F4A3E}
.certif b{display:flex; align-items:center; gap:6px; color:#17663E; font-size:13.5px}
.certif b .ico{width:16px; height:16px}
.certif code{font-size:11.5px}
.promise{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.promise li{display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:14.5px}
.promise .ico{width:20px; height:20px; color:var(--g); flex-shrink:0; margin-top:1px}
.plan-ban{display:flex; align-items:center; gap:12px; text-align:left; width:100%; background:#FDECEC; border-color:#F3C4C4}
.plan-ban .ri{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.7); color:#A62626; flex-shrink:0}
.plan-ban > span:nth-child(2){flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.plan-ban.soft{background:#E3F0EA; border-color:#BFDCCB}
.plan-ban.soft .ri{color:#075B46}
.crew{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px; line-height:1.3}
.crew .avs{display:flex; flex-shrink:0}
.crew .avs .av{border:2px solid var(--white); margin-left:-7px}
.crew .avs .av:first-child{margin-left:0}
.rdv-next{display:flex; align-items:center; gap:12px; text-align:left; width:100%}
.rdv-next .ri{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#E6F0FA; color:#2878C8; flex-shrink:0}
.rdv-next > span:nth-child(2){flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.rdv-next > .ico{color:var(--mut)}
.pick{display:flex; flex-wrap:wrap; gap:6px; margin-top:-4px}
.pick button{padding:6px 11px; border-radius:99px; background:#E8EDEA; font-size:12.5px; font-weight:600; color:var(--ink)}
.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:#E8EDEA; border-radius:12px; padding:3px; gap:3px}
.seg button{padding:9px 4px; border-radius:9px; font-weight:600; font-size:13px; color:var(--mut)}
.seg button.on{background:var(--g); color:#fff}

/* install guide: full screen, the arrow points at the browser's own button (bottom on iPhone, top right on Android) */
.inst-bg{position:fixed; inset:0; z-index:60; background:rgba(16,30,25,.55); display:flex; align-items:center; justify-content:center; padding:24px 16px calc(96px + env(safe-area-inset-bottom,0px)); animation:fade .18s}
.inst{background:var(--white); border-radius:24px; padding:24px 20px 16px; max-width:380px; width:100%; display:flex; flex-direction:column; gap:14px; text-align:left}
.inst-ic{width:72px; height:72px; border-radius:18px; background:#E3F0EA; display:grid; place-items:center; align-self:center}
.inst h2{margin:0; text-align:center; font-family:var(--font-display); font-weight:600; font-size:21px}
.inst > .mut{margin:0; text-align:center; font-size:14px}
.inst .lead{margin:0; font-weight:600}
.inst .steps{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.inst .steps li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.35}
.inst .steps .n{flex:none; width:30px; height:30px; border-radius:50%; background:var(--g); color:#fff; font-weight:700; display:grid; place-items:center}
.inst .steps small{display:block; margin-top:3px; color:var(--mut); font-size:13px}
.inst .key{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:8px; background:#EEF2F0; border:1px solid var(--line); white-space:nowrap}
.inst .key svg{width:18px; height:18px; fill:none; stroke:#1F6FD6; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.inst .btn.big{height:56px; font-size:17px}
.inst .linkbtn{align-self:center}
.inst-arrow{position:fixed; width:0; height:0; border:16px solid transparent; animation:nudge 1s ease-in-out infinite}
.inst-arrow.down{left:calc(50% - 16px); bottom:calc(14px + env(safe-area-inset-bottom,0px)); border-top:22px solid #fff; border-bottom:0}
.inst-arrow.up{right:14px; top:calc(6px + env(safe-area-inset-top,0px)); border-bottom:22px solid #fff; border-top:0}
@keyframes nudge{50%{transform:translateY(8px)}}
.inst-arrow.up{animation-name:nudgeup}
@keyframes nudgeup{50%{transform:translateY(-8px)}}

/* sheet / toast / hold */
.sheet-bg{position:absolute; inset:0; background:rgba(16,30,25,.42); z-index:40; display:flex; align-items:flex-end; animation:fade .18s}
.sheet{background:var(--white); width:100%; max-height:90%; border-radius:24px 24px 0 0; padding:10px 18px calc(24px + env(safe-area-inset-bottom,0px)); overflow-y:auto; display:flex; flex-direction:column; gap:14px; animation:up .22s cubic-bezier(.2,.8,.3,1)}
.sheet .grab{width:40px; height:5px; border-radius:3px; background:var(--line); align-self:center}
.sheet h2{margin:0; font-family:var(--font-display); font-weight:600; font-size:20px}
@keyframes up{from{transform:translateY(40px); opacity:.4}}
@keyframes fade{from{opacity:0}}
.toast{position:absolute; left:16px; right:16px; bottom:96px; z-index:60; background:#1C2925; color:#fff; border-radius:14px; padding:12px 14px; font-size:13.5px; line-height:1.4; display:flex; gap:10px; align-items:flex-start; box-shadow:0 10px 30px rgba(0,0,0,.25); animation:up .2s}
.toast .ico{color:var(--gl); flex:none}
.toast.err .ico{color:#FF8A8A}
.hold{position:absolute; inset:0; z-index:55; background:rgba(12,30,24,.85); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; pointer-events:none}
.hold-mic{width:112px; height:112px; border-radius:50%; background:var(--bad); display:grid; place-items:center; animation:pulse 1.2s infinite}
.hold-mic .ico{width:46px; height:46px}
.hold b{font-size:30px; font-variant-numeric:tabular-nums; font-family:var(--font-display)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,54,54,.6)}100%{box-shadow:0 0 0 30px rgba(217,54,54,0)}}
.loading{flex:1; display:grid; place-items:center; color:var(--mut)}

/* onboarding */
.ob{flex:1; overflow-y:auto; display:flex; flex-direction:column; background:var(--white)}
.ob-pad{padding:8px 22px 28px; display:flex; flex-direction:column; gap:16px; flex:1}
.ob-head{display:flex; align-items:center; gap:8px; padding:calc(6px + env(safe-area-inset-top,0px)) 10px 0}
.ob-head h2{margin:0; font-family:var(--font-display); font-size:18px; font-weight:600; flex:1; text-align:center; padding-right:38px}
.welcome{flex:1; display:flex; flex-direction:column; background:var(--white); overflow-y:auto}
.welcome .hero{position:relative; height:320px; flex:none; border-bottom:1px solid var(--line)}
.welcome .hero > svg{position:absolute; inset:0; width:100%; height:100%}
.welcome .lgbig{position:absolute; inset:0 0 auto; padding-top:calc(18px + env(safe-area-inset-top,0px)); display:flex; flex-direction:column; align-items:center; gap:4px}
.welcome .wm{font-family:var(--font-display); font-weight:700; font-size:42px; letter-spacing:-.02em; line-height:1}
.welcome .wm .b{color:var(--g)} .welcome .wm .l{color:var(--gl)}
.welcome .tg{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#3E4B47; text-align:center; line-height:1.6; margin-top:6px; font-weight:500}
.welcome .body{padding:20px 22px 28px; display:flex; flex-direction:column; gap:16px}
.welcome h1{margin:0; font-family:var(--font-display); font-weight:600; font-size:23px; line-height:1.2}
.welcome .pro{font-size:13.5px; color:var(--mut); text-align:center}
.feat{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.feat li{display:flex; gap:12px; align-items:center; font-size:14.5px}
.feat li .ico{width:22px; height:22px; color:var(--g)}
.or{display:flex; align-items:center; gap:10px; color:var(--mut); font-size:12px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.rolecard{display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:center; padding:14px; border-radius:16px; text-align:left}
.rolecard .ri{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff}
.rolecard .ri .ico{width:22px; height:22px}
.rolecard b{font-size:15px; font-weight:700; display:block}
.rolecard span{font-size:13px; color:var(--mut); line-height:1.35}
.done-ico{width:86px; height:86px; border-radius:50%; background:var(--g); display:grid; place-items:center; color:#fff; align-self:center; margin-top:18px; box-shadow:0 0 0 10px #E5F0EA}
.done-ico .ico{width:44px; height:44px; stroke-width:2.6}
.linkbox{display:flex; gap:8px; align-items:center; background:var(--bg); border-radius:12px; padding:10px 12px; font-size:13px; overflow-wrap:anywhere}
.linkbox code{flex:1; font-family:ui-monospace,Consolas,monospace}

/* rest mode */
.rest{flex:1; display:flex; flex-direction:column; gap:16px; padding:24px 20px; background:linear-gradient(180deg, #0E2A3A 0%, #12403A 100%); color:#E7F0EC; overflow-y:auto}
.rest .moon{width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#F4E9C8}
.rest .moon .ico{width:36px; height:36px}
.rest h1{margin:0; font-family:var(--font-display); font-weight:600; font-size:26px}
.rest .card{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:#E7F0EC}
.rest .btn.sec{background:transparent; color:#fff; border-color:rgba(255,255,255,.3)}

table.dv{width:100%; border-collapse:collapse; font-size:13px}
table.dv th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); font-weight:700; padding:6px 4px; border-bottom:1px solid var(--line)}
table.dv td{padding:8px 4px; border-bottom:1px solid var(--line); vertical-align:top}
table.dv .n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.dv tfoot td{font-weight:700; border:0; padding-top:6px}
.tbl{overflow-x:auto}
.empty{border:1.5px dashed var(--line); border-radius:16px; padding:18px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; color:var(--mut)}
.empty b{color:var(--ink)}
.setup{padding:24px; display:flex; flex-direction:column; gap:14px; overflow-y:auto}
.setup code{background:#fff; padding:2px 6px; border-radius:6px; border:1px solid var(--line)}

/* read receipts, step talk, push prompt */
.seen{align-self:flex-end; display:flex; align-items:center; gap:3px; font-size:11.5px; color:var(--mut); margin-top:-4px}
.seen.ok{color:var(--ok)}
.seen .ico{width:13px; height:13px; stroke-width:2.6}
.card.talk{display:flex; flex-direction:column; gap:12px}
.tk{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
.tk p{font-size:14px; margin-top:2px; overflow-wrap:anywhere}
.tk-in{display:flex; gap:8px; align-items:center; border-top:1px solid var(--line); padding-top:12px}
.tk-in input{flex:1; min-width:0; height:42px; border-radius:21px; border:1px solid var(--line); background:var(--bg); padding:0 14px; font:inherit; color:var(--ink)}
.card.push-card{display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-items:center; border-color:#BBD6F0; background:#F3F8FD}
.push-card .ri{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#E6F0FA; color:#2878C8}
.push-card .btns{grid-column:1 / -1}

/* forwarded client messages */
.fwd{align-self:flex-start; margin-top:4px; font-size:12px; font-weight:700; color:var(--g); background:#E5F0EA; border-radius:8px; padding:4px 8px}
.fwd.done{display:inline-flex; gap:4px; align-items:center; background:#E3F3EA; color:#17663E}
.fwd .ico{width:13px; height:13px}
.msg.issue .bub{border-color:#F8CBD7; background:#FFF5F7}

/* welcome: logo above the "link" illustration (client at the centre) */
.welcome .hero{height:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:calc(20px + env(safe-area-inset-top, 0px)) 16px 12px; background:linear-gradient(180deg, #F6F8F7, #EEF5F0)}
.welcome .lgbig{position:static; padding-top:0}
.welcome .wm{font-size:36px}
.welcome .net{width:100%; max-width:380px}
.welcome .net svg{display:block; width:100%; height:auto}
.net .flow{stroke-dasharray:2 10; animation:flow 1.4s linear infinite}
.net .flow.rev{animation-direction:reverse}
.net .flow.slow{animation-duration:2.4s}
.net .halo{transform-box:fill-box; transform-origin:center; animation:halo 2.6s ease-out infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
@keyframes halo{0%{transform:scale(.85); opacity:.35}100%{transform:scale(1.35); opacity:0}}

/* client & patron homes */
.card.where{display:flex; flex-direction:column; gap:8px}
.card.where .bar{flex:none}
.card.photo-card{padding:0; overflow:hidden; display:flex; flex-direction:column; text-align:left}
.card.photo-card img{width:100%; height:130px; object-fit:cover; display:block}
.pc-cap{display:flex; flex-direction:column; gap:2px; padding:10px 14px}
a.big{text-decoration:none}
.big.blue{background:#164A70}
.qgrid.three{grid-template-columns:repeat(3,1fr)}
.qa .cnt{margin-top:-2px}
.row .s .ico{width:13px; height:13px; vertical-align:-2px; color:var(--ok)}

/* side-swipe cards and rows */
.slider{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; scrollbar-width:none; overscroll-behavior-x:contain}
.slider::-webkit-scrollbar, .hscroll::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc(100% - 24px); scroll-snap-align:start; display:flex}
.slide > *{flex:1; min-width:0}
.dots{display:flex; justify-content:center; gap:6px; margin-top:9px}
.dots button{width:8px; height:8px; border-radius:4px; background:#C9D3CE; transition:width .2s, background .2s}
.dots button.on{width:22px; background:var(--g)}
.hscroll{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; margin-inline:-16px; padding:2px 16px 6px; scroll-padding-inline:16px; scrollbar-width:none}
.hscroll .qa{flex:0 0 116px; scroll-snap-align:start}
.hrs-quick{display:flex; gap:12px; align-items:center}
.hrs-quick .btn{flex:1}

/* badges & celebrations */
.rankcard{display:flex; flex-direction:column; gap:10px; text-align:left}
.rk-top{display:flex; justify-content:space-between; align-items:center}
.rk-top b{display:block; font-family:var(--font-display); font-size:18px; font-weight:600}
.bdgs{display:flex; gap:8px; flex-wrap:wrap}
.bdg{position:relative; display:inline-grid; place-items:center; border-radius:50%; background:#fff; border:2.5px solid var(--tc); flex:none; line-height:1}
.bdg.off{filter:grayscale(1); opacity:.45}
.bdg i{position:absolute; right:-5px; bottom:-4px; min-width:17px; height:17px; border-radius:9px; background:var(--tc); color:#fff; font-size:10px; font-style:normal; font-weight:700; display:grid; place-items:center; border:2px solid #fff; padding:0 3px}
.rank-hero{display:flex; flex-direction:column; gap:8px}
.ranks{display:flex; flex-wrap:wrap; gap:6px}
.ranks span{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; background:#EEF0EF; color:#7A8580}
.ranks span.on{background:#E3F3EA; color:#17663E}
.brow{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:12px 14px; border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow .tx{display:flex; flex-direction:column; gap:4px; min-width:0}
.brow .tx b{font-weight:600}
.brow .tx span{font-size:12.5px; color:var(--mut)}
.brow em{font-style:normal; font-weight:700}
.bar.thin{height:6px; flex:none}
.celebrate{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:6px 0}
.celebrate .big-emoji{font-size:64px; line-height:1; animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.celebrate p{font-size:16px; line-height:1.45}
@keyframes pop{from{transform:scale(.3); opacity:0}}
.confetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:70}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* avis sur Lieno: five faces, the chosen one stands out */
.fb-faces{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px}
.fb-face{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 2px; border-radius:14px; border:1.5px solid var(--line); background:var(--white); font:inherit; cursor:pointer}
.fb-face span{font-size:28px; line-height:1; filter:grayscale(.6); opacity:.75}
.fb-face small{font-size:11.5px; color:var(--mut); font-weight:600}
.fb-face.on{border-color:var(--g); background:#E3F0EA}
.fb-face.on span{filter:none; opacity:1}
.fb-face.on small{color:var(--g)}

/* règles de la prime de chantier */
.rules-text{display:grid; gap:10px; font-size:14.5px; line-height:1.5}
.rules-text p{margin:0}
.rules-list{margin:0; padding-left:20px; display:grid; gap:8px}
/* Météo du chantier : une ligne discrète en haut de l'accueil */
.wx{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--mut); padding:2px 2px 0}
.wx b{color:var(--ink, inherit); font-size:14px}
.wx-i{font-size:18px; line-height:1}
.wx-d{margin-left:auto; white-space:nowrap}