/* Styles de l'appli (repris du site de démonstration) */

/* ===== Tokens + base + boutons ===== */
/* ============ Tokens ============ */
:root{
  color-scheme: light;
  --bg:#F2F3F5; --bg-2:#E8EAEE; --card:#FFFFFF; --card-2:#F6F7F9;
  --ink:#12141B; --ink-2:#3F4352; --muted:#626777; --line:#E0E3E9; --line-2:#CBCFD8;
  --accent:#D93A1C; --accent-hover:#BF2F14; --on-accent:#FFFFFF;
  --carbon:#2B3FBF; --carbon-ink:#2B3FBF;
  --slip-pink:#FFD5DC; --slip-yellow:#FFEDA3; --slip-white:#FFFFFF; --print-red:#C8372D;
  --ok:#12A150; --ok-ink:#0B7A3B; --warn:#E5A00D; --warn-ink:#8A5A00; --crit:#D03B3B; --done:#8B90A0;
  --heat-ink:#FFFFFF; --stamp-blend:multiply; --bubble:#E9E9EB; --bubble-ink:#111318;
  --sun:none; --moon:block;
  --glow-a:color-mix(in oklab, #FFC2CD 75%, transparent);
  --glow-b:color-mix(in oklab, #FFE58A 70%, transparent);
  --shadow:0 1px 0 rgba(16,20,40,.04), 0 14px 34px -16px rgba(16,20,40,.22);
  --shadow-lg:0 2px 0 rgba(16,20,40,.03), 0 50px 90px -40px rgba(16,20,40,.42);
  --f-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-hand:"Snell Roundhand", "Segoe Script", "Apple Chancery", cursive;
  --r-xl:32px; --r-lg:26px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --gut:clamp(18px, 4vw, 40px);
  interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0C0E13; --bg-2:#12151C; --card:#171A22; --card-2:#1D2029;
    --ink:#EEF0F6; --ink-2:#C2C6D2; --muted:#9095A7; --line:#262A35; --line-2:#363B4A;
    --accent:#FF5A36; --accent-hover:#FF7354; --on-accent:#170806;
    --carbon:#AAB5FF; --carbon-ink:#2B3FBF;
    --slip-pink:#EDC3CB; --slip-yellow:#EBDA94; --slip-white:#ECEAE3; --print-red:#B9372E;
    --ok:#2BC06A; --ok-ink:#62DA94; --warn:#F0B42E; --warn-ink:#F3CA6E; --crit:#F06464; --done:#7D8293;
    --heat-ink:#0C0E13; --stamp-blend:screen; --bubble:#2A2E39; --bubble-ink:#EEF0F6;
    --sun:block; --moon:none;
    --glow-a:color-mix(in oklab, #FF5A36 22%, transparent);
    --glow-b:color-mix(in oklab, #5B6BFF 22%, transparent);
    --shadow:0 1px 0 rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
    --shadow-lg:0 60px 100px -40px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0C0E13; --bg-2:#12151C; --card:#171A22; --card-2:#1D2029;
  --ink:#EEF0F6; --ink-2:#C2C6D2; --muted:#9095A7; --line:#262A35; --line-2:#363B4A;
  --accent:#FF5A36; --accent-hover:#FF7354; --on-accent:#170806;
  --carbon:#AAB5FF; --carbon-ink:#2B3FBF;
  --slip-pink:#EDC3CB; --slip-yellow:#EBDA94; --slip-white:#ECEAE3; --print-red:#B9372E;
  --ok:#2BC06A; --ok-ink:#62DA94; --warn:#F0B42E; --warn-ink:#F3CA6E; --crit:#F06464; --done:#7D8293;
  --heat-ink:#0C0E13; --stamp-blend:screen; --bubble:#2A2E39; --bubble-ink:#EEF0F6;
  --sun:block; --moon:none;
  --glow-a:color-mix(in oklab, #FF5A36 22%, transparent);
  --glow-b:color-mix(in oklab, #5B6BFF 22%, transparent);
  --shadow:0 1px 0 rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.8);
  --shadow-lg:0 60px 100px -40px rgba(0,0,0,.9);
}

/* ============ Base ============ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip }
a{ color:inherit }
button{ font:inherit; color:inherit }
h1,h2,h3,h4,p{ margin:0 }
p{ text-wrap:pretty }
::selection{ background:color-mix(in oklab, var(--accent) 30%, transparent) }
:focus-visible{ outline:3px solid color-mix(in oklab, var(--carbon) 65%, transparent); outline-offset:2px; border-radius:8px }
.wrap{ width:min(1180px, 100% - 2 * var(--gut)); margin-inline:auto }
.muted{ color:var(--muted) }
.opt{ font-weight:500; color:var(--muted) }
.hand{ font-family:var(--f-hand); font-weight:400; color:var(--carbon); font-stretch:100%; letter-spacing:0 }
.center{ text-align:center }
.l-short{ display:none }
@media (max-width:560px){ .hide-s{ display:none } .l-long{ display:none } .l-short{ display:inline } }

/* ============ Buttons ============ */
.btn{ appearance:none; border:0; font:inherit; font-weight:650; font-stretch:104%; display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding:.78em 1.2em; border-radius:999px; text-decoration:none; cursor:pointer; color:var(--ink); background:var(--card); box-shadow:inset 0 0 0 1px var(--line-2); transition:transform .18s var(--ease), background-color .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent; min-height:44px; white-space:nowrap; line-height:1.2 }
.btn:hover{ background:var(--card-2) }
.btn:active{ transform:scale(.97) }
.btn svg{ flex:none }
.btn-accent{ background:var(--accent); color:var(--on-accent); box-shadow:0 10px 26px -12px color-mix(in oklab, var(--accent) 80%, transparent) }
.btn-accent:hover{ background:var(--accent-hover) }
.btn-ink{ background:var(--ink); color:var(--bg); box-shadow:none }
.btn-ink:hover{ background:color-mix(in oklab, var(--ink) 88%, var(--bg)) }
.btn-ghost{ background:transparent }
.btn-ghost:hover{ background:color-mix(in oklab, var(--ink) 6%, transparent) }
.btn-lg{ font-size:1.04rem; padding:1em 1.55em; min-height:54px }
.btn-sm{ font-size:.875rem; padding:.55em .95em; min-height:38px }
.btn.block{ width:100% }
.btn .arr{ transition:transform .25s var(--ease) }
.btn:hover .arr{ transform:translateX(3px) }
.icon-btn{ flex:none; width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; border:0; background:transparent; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line-2); transition:background-color .2s }
.icon-btn:hover{ background:color-mix(in oklab, var(--ink) 6%, transparent) }
.icon-btn.sm{ width:38px; height:38px }
.theme-ic .moon{ display:var(--moon) } .theme-ic .sun{ display:var(--sun) }


/* ===== Jauges (production) ===== */
/* meters (production) */
.meter{ display:block; height:8px; border-radius:4px; background:color-mix(in oklab, var(--carbon) 15%, var(--card)); overflow:hidden }
.meter i{ display:block; height:100%; width:calc(var(--v, 0) * 100%); background:var(--carbon); border-radius:0 4px 4px 0; transition:width .8s var(--ease) }
.meter.warn{ background:color-mix(in oklab, var(--warn) 20%, var(--card)) }
.meter.warn i{ background:var(--warn) }
.meter.full{ background:color-mix(in oklab, var(--crit) 16%, var(--card)) }
.meter.full i{ background:var(--crit) }
.prodlist .meter i{ animation:fill-in .9s var(--ease) both }
@keyframes fill-in{ from{ width:0 } }


/* ===== Page client + espace commerçant + fenêtre + installation ===== */
/* ============ Client page ============ */
.cp{ padding-bottom:18px }
.cp-hero{ padding:26px 22px 22px; border-bottom:1px solid var(--line); background:radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--slip-pink) 60%, transparent), transparent 62%), radial-gradient(90% 80% at 100% 0%, color-mix(in oklab, var(--slip-yellow) 55%, transparent), transparent 60%) }
.cp-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-stretch:112% }
.cp-title{ font-size:1.95rem; font-weight:850; font-stretch:118%; letter-spacing:-.025em; line-height:1.02; margin:7px 0 9px; overflow-wrap:anywhere }
.cp-msg{ color:var(--ink-2); font-size:.97rem }
.cp-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.cp-meta span{ font-size:.74rem; font-weight:650; padding:.38em .72em; border-radius:999px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2) }
.cp-step{ padding:22px 18px 6px; scroll-margin-top:90px }
.cp-step h4{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:1.02rem; font-weight:800; font-stretch:108% }
.n{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-size:.78rem; font-weight:800; transition:background-color .3s }
.n.ok{ background:var(--ok); color:#fff }
.n svg{ width:14px; height:14px }
.err{ display:none; color:var(--crit); font-size:.86rem; font-weight:650; margin:-4px 0 10px }
.err.show{ display:block; animation:shake .42s var(--ease) }
@keyframes shake{ 20%{ transform:translateX(-5px) } 40%{ transform:translateX(5px) } 60%{ transform:translateX(-3px) } 80%{ transform:translateX(2px) } }
.days{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px; scroll-snap-type:x proximity; scrollbar-width:none }
.days::-webkit-scrollbar{ display:none }
.day{ position:relative; flex:0 0 auto; width:62px; padding:9px 0 8px; border-radius:16px; border:0; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; display:grid; justify-items:center; gap:0; scroll-snap-align:start; transition:transform .25s var(--spring), background-color .2s, color .2s }
.day small{ font-size:.66rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em }
.day b{ font-size:1.4rem; font-weight:800; font-stretch:88%; line-height:1.15 }
.day .st{ font-size:.62rem; font-weight:700; color:var(--muted) }
.day .dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--warn) }
.day[aria-pressed="true"]{ background:var(--ink); color:var(--bg); box-shadow:none; transform:translateY(-3px) }
.day[aria-pressed="true"] small, .day[aria-pressed="true"] .st{ color:color-mix(in oklab, var(--bg) 72%, transparent) }
.day:disabled{ opacity:.45; cursor:not-allowed }
.products{ list-style:none; margin:0; padding:0; display:grid; gap:10px; container-type:inline-size }
.product{ display:grid; grid-template-columns:56px 1fr auto; grid-template-areas:"art info step" "art stock step"; column-gap:12px; align-items:center; padding:10px; border-radius:18px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .25s, background-color .25s }
.product > .art{ grid-area:art }
.product > .pinfo{ grid-area:info; align-self:end }
.product > .pstock{ grid-area:stock; align-self:start; min-width:0 }
.product > .stepper{ grid-area:step }
@container (max-width: 380px){
  .product{ grid-template-columns:48px 1fr auto; grid-template-areas:"art info info" "art stock step"; column-gap:10px; row-gap:6px }
  .product > .art{ width:48px; height:48px; align-self:start }
  .product > .art svg{ width:40px; height:40px }
  .product > .pstock{ align-self:center }
}
.product.on{ background:color-mix(in oklab, var(--accent) 6%, var(--card)); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 60%, transparent) }
.product.is-out{ opacity:.6 }
.art{ flex:none; width:56px; height:56px; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center }
.art svg{ width:46px; height:46px; display:block }
.pinfo{ min-width:0 }
.pinfo b{ display:block; font-size:.95rem; font-weight:720; line-height:1.25 }
.pinfo span{ font-size:.84rem; color:var(--ink-2) }
.stock{ display:block; font-size:.74rem; font-weight:650; color:var(--muted); margin-top:2px }
.stock.low{ color:var(--warn-ink) }
.stock.out{ color:var(--crit) }
.stepper{ display:flex; align-items:center; gap:2px; background:var(--card); border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); padding:3px }
.stepper button{ width:38px; height:38px; border-radius:50%; border:0; background:transparent; color:var(--ink); font-size:1.25rem; font-weight:600; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background-color .2s }
.stepper button:hover:not(:disabled){ background:var(--bg-2) }
.stepper button:disabled{ opacity:.28; cursor:not-allowed }
.stepper output{ min-width:1.7ch; text-align:center; font-weight:800; font-variant-numeric:tabular-nums }
.stepper.sm button{ width:34px; height:34px; font-size:1.1rem }
.stepper.lg{ display:inline-flex; justify-self:start }
.stepper.lg output{ min-width:3ch; font-size:1.1rem }
.pop{ animation:pop .38s var(--spring) }
@keyframes pop{ 0%{ transform:scale(1.55) } 100%{ transform:scale(1) } }
.slots{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px }
.slot{ border:0; cursor:pointer; text-align:left; padding:11px 13px; border-radius:14px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); display:flex; justify-content:space-between; align-items:center; gap:6px; min-height:50px; transition:background-color .2s, color .2s }
.slot b{ font-weight:750; font-size:.95rem }
.slot small{ font-size:.72rem; color:var(--muted); font-weight:650; white-space:nowrap }
.slot small.few{ color:var(--warn-ink) }
.slot[aria-pressed="true"]{ background:var(--ink); color:var(--bg); box-shadow:none }
.slot[aria-pressed="true"] small{ color:color-mix(in oklab, var(--bg) 72%, transparent) }
.slot:disabled{ opacity:.45; cursor:not-allowed }
.hint{ grid-column:1 / -1; color:var(--muted); font-size:.9rem; padding:12px 14px; border-radius:14px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line) }
.field{ display:grid; gap:6px; margin-bottom:12px }
.field > label, .lbl{ font-size:.84rem; font-weight:700; color:var(--ink-2) }
.lbl{ display:block; margin-bottom:8px }
.input{ font:inherit; font-size:16px; width:100%; padding:13px 14px; border-radius:14px; border:0; background:var(--card-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .15s; -webkit-appearance:none; appearance:none }
.input::placeholder{ color:color-mix(in oklab, var(--muted) 75%, transparent) }
.input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--carbon) }
.input.bad{ box-shadow:inset 0 0 0 2px var(--crit) }
textarea.input{ resize:vertical; min-height:64px; line-height:1.4 }
.input.sm{ padding:10px 12px; border-radius:12px }
.sel{ position:relative }
.sel::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none }
.sel select{ padding-right:36px; cursor:pointer }
.cp-bar{ position:sticky; bottom:12px; z-index:5; margin:16px 12px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 9px 9px 18px; border-radius:999px; background:color-mix(in oklab, var(--ink) 94%, transparent); color:var(--bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 18px 40px -16px rgba(0,0,0,.5) }
.cp-bar .sum{ display:grid; line-height:1.15; min-width:0 }
.cp-bar .sum small{ font-size:.74rem; opacity:.75; white-space:nowrap }
.cp-bar .sum b{ font-size:1.12rem; font-weight:800; display:inline-block; transform-origin:0 50% }
.cp-bar .btn{ min-height:46px }

.cp-done{ padding:28px 18px 24px; display:grid; gap:18px }
.done-head{ text-align:center }
.done-head .hand{ display:block; font-size:1.5rem; line-height:1.7 }
.done-head h3{ margin:0 0 6px; font-size:1.6rem; font-weight:850; font-stretch:118%; letter-spacing:-.02em }
.done-head p{ color:var(--ink-2) }
.tkw{ filter:drop-shadow(0 18px 26px rgba(16,20,40,.16)) }
.tk-lines{ list-style:none; margin:8px 0 0; padding:0 16px; display:grid; gap:4px; font-size:.92rem }
.tk-lines li{ display:flex; justify-content:space-between; gap:10px; color:var(--ink-2) }
.tk-lines b{ color:var(--ink); font-weight:650; white-space:nowrap }
.tk-note{ margin:10px 16px 0; font-size:.86rem; color:var(--ink-2) }
.tk-flow .tk-foot{ margin-top:14px }
.sms{ background:var(--card-2); border-radius:22px; padding:14px; box-shadow:inset 0 0 0 1px var(--line) }
.sms-top{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--muted); font-weight:650; margin-bottom:8px }
.bubble{ background:var(--bubble); color:var(--bubble-ink); border-radius:18px 18px 18px 6px; padding:10px 14px; font-size:.9rem; line-height:1.4; max-width:94% }
.sms > small{ display:block; margin-top:8px; font-size:.74rem; color:var(--muted) }
.done-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }

/* ============ Merchant ============ */
.mp{ padding:18px }
.mp-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px }
.mp-head small{ color:var(--muted); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em }
.mp-head h3{ margin-top:2px; font-size:1.5rem; font-weight:850; font-stretch:115%; letter-spacing:-.02em; line-height:1.1 }
.dchips{ display:flex; gap:6px; overflow-x:auto; margin:0 -18px; padding:2px 18px 8px; scrollbar-width:none }
.dchips::-webkit-scrollbar{ display:none }
.dchips.center{ justify-content:center; flex-wrap:wrap; margin:14px 0 0; padding:0 }
.dchip, .fchip{ flex:0 0 auto; border:0; font-size:.85rem; font-weight:650; padding:.5em .85em; border-radius:999px; background:var(--card); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; display:inline-flex; gap:.45em; align-items:center; min-height:38px; transition:background-color .2s, color .2s }
.dchip i, .fchip i{ font-style:normal; font-size:.72rem; font-weight:800; min-width:20px; height:20px; border-radius:999px; display:inline-grid; place-items:center; background:var(--bg-2); color:var(--ink-2); padding:0 6px }
.dchip[aria-pressed="true"], .fchip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); box-shadow:none }
.dchip[aria-pressed="true"] i, .fchip[aria-pressed="true"] i{ background:color-mix(in oklab, var(--bg) 22%, transparent); color:var(--bg) }
.fchips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px }
.fchip{ font-size:.8rem; min-height:34px; padding:.4em .75em }
.kpis{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin:12px 0 16px }
@media (min-width:760px){ .kpis{ grid-template-columns:repeat(4, 1fr) } }
.kpi{ background:var(--card); border-radius:16px; padding:12px 14px; box-shadow:inset 0 0 0 1px var(--line); min-width:0 }
.kpi span{ display:block; font-size:.78rem; font-weight:650; color:var(--muted) }
.kpi b{ display:block; font-size:1.75rem; font-weight:700; letter-spacing:-.01em; line-height:1.15; margin-top:2px }
.kpi small{ display:block; font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.subtabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow-x:auto; scrollbar-width:none }
.subtab{ border:0; background:transparent; font-weight:700; font-size:.94rem; color:var(--muted); padding:10px 12px; border-bottom:2.5px solid transparent; margin-bottom:-1px; cursor:pointer; white-space:nowrap; min-height:46px; transition:color .2s, border-color .2s }
.subtab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent) }
.olist{ display:grid; gap:12px }
@media (min-width:860px){ .olist{ grid-template-columns:repeat(2, 1fr); align-items:start } }
.otk{ display:flex; flex-direction:column }
.otk-top{ display:flex; align-items:center; gap:8px; padding:14px 16px 2px; flex-wrap:wrap }
.otk .tk-no{ font-size:1.18rem }
.when{ font-size:.8rem; font-weight:650; color:var(--ink-2) }
.src{ margin-left:auto; font-size:.7rem; font-weight:700; color:var(--muted); display:inline-flex; gap:4px; align-items:center }
.new-badge{ background:var(--accent); color:var(--on-accent); font-size:.64rem; font-weight:800; padding:.25em .55em; border-radius:999px; text-transform:uppercase; letter-spacing:.06em }
.otk-name{ padding:4px 16px 0; font-weight:750; font-size:1rem }
.otk-name small{ font-weight:500; color:var(--muted); margin-left:6px; font-size:.82rem; white-space:nowrap }
.otk-items{ padding:4px 16px 0; margin:0; list-style:none; font-size:.9rem; color:var(--ink-2) }
@media (min-width:520px){ .otk-items{ padding-right:104px } }
.otk-note{ margin:8px 16px 0; padding:7px 10px; border-radius:10px; background:color-mix(in oklab, var(--slip-yellow) 45%, var(--card)); color:var(--ink-2); font-size:.84rem; border-left:3px solid var(--warn) }
.otk-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:52px; padding:0 10px 0 16px; margin-top:12px; border-top:1.5px dashed var(--line-2) }
.otk-foot b{ font-size:1rem; font-weight:800 }
.act{ border:0; font-size:.84rem; font-weight:750; padding:.55em .9em; border-radius:999px; cursor:pointer; min-height:36px; display:inline-flex; gap:.4em; align-items:center; transition:transform .15s var(--ease), background-color .2s }
.act:active{ transform:scale(.96) }
.act.todo{ background:var(--ink); color:var(--bg) }
.act.ready{ background:color-mix(in oklab, var(--ok) 18%, transparent); color:var(--ok-ink) }
.act.done{ background:var(--bg-2); color:var(--muted) }
.otk.is-done{ opacity:.66 }
.otk.is-done:hover{ opacity:1 }
.otk.fresh{ animation:fresh 2.6s var(--ease) }
@keyframes fresh{ 0%, 45%{ box-shadow:inset 0 0 0 3px var(--accent) } 100%{ box-shadow:inset 0 0 0 1px var(--line) } }
.otk.thump{ animation:thump .34s ease .1s }
@keyframes thump{ 50%{ transform:translateY(2px) scale(.996) } }
.stamp{ position:absolute; right:14px; top:44px; font-weight:900; font-stretch:125%; text-transform:uppercase; letter-spacing:.06em; font-size:1rem; line-height:1; padding:.32em .55em .28em; border:3px solid currentColor; border-radius:9px; transform:rotate(-12deg); opacity:.9; pointer-events:none; filter:url(#rough); mix-blend-mode:var(--stamp-blend) }
.stamp.ready, .stamp.ok{ color:var(--ok) }
.stamp.done{ color:var(--done) }
.stamp.in{ animation:stamp .44s cubic-bezier(.2,1.4,.4,1) both }
@keyframes stamp{ 0%{ opacity:0; transform:rotate(-3deg) scale(2.2) } 60%{ opacity:.95; transform:rotate(-13deg) scale(.93) } 100%{ opacity:.9; transform:rotate(-12deg) scale(1) } }
.empty{ text-align:center; padding:34px 18px; color:var(--muted); background:var(--card); border-radius:16px; box-shadow:inset 0 0 0 1px var(--line) }
.prod-tools{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap }
.prod-tools p{ font-size:.92rem; color:var(--ink-2) }
.prodlist{ display:grid; gap:10px }
@media (min-width:860px){ .prodlist{ grid-template-columns:repeat(2, 1fr) } }
.prod-row{ display:grid; grid-template-columns:44px 1fr auto; gap:8px 12px; align-items:center; background:var(--card); border-radius:16px; padding:12px 14px 14px; box-shadow:inset 0 0 0 1px var(--line) }
.prod-row .art{ width:44px; height:44px; border-radius:12px }
.prod-row .art svg{ width:36px; height:36px }
.prod-row .nm{ min-width:0 }
.prod-row .nm b{ display:block; font-weight:720; line-height:1.25 }
.prod-row .nm small{ color:var(--muted); font-size:.8rem }
.pst{ display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:750; margin-top:2px }
.pst.warn{ color:var(--warn-ink) }
.pst.crit{ color:var(--crit) }
.prod-row .big{ font-size:2rem; font-weight:700; line-height:1; text-align:right }
.prod-row .big small{ display:block; font-size:.72rem; font-weight:650; color:var(--muted); margin-top:4px }
.prod-row .meter{ grid-column:1 / -1 }
.heat-wrap{ overflow-x:auto; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); padding:6px }
table.heat{ border-collapse:separate; border-spacing:3px; width:100%; min-width:600px; font-size:.86rem }
.heat th{ font-weight:700; color:var(--muted); font-size:.74rem; padding:8px 6px; text-align:center; white-space:nowrap }
.heat thead th:first-child, .heat tbody th{ text-align:left; position:sticky; left:0; background:var(--card); z-index:1 }
.heat tbody th{ color:var(--ink); font-size:.84rem; font-weight:650; padding-right:12px }
.hp{ display:flex; align-items:center; gap:8px }
.hp svg{ width:26px; height:26px; flex:none; display:block }
.hp span{ white-space:nowrap; max-width:190px; overflow:hidden; text-overflow:ellipsis }
.heat td{ text-align:center; padding:10px 6px; border-radius:7px; font-variant-numeric:tabular-nums; font-weight:650; min-width:44px }
.heat td.s0{ color:var(--muted); font-weight:500 }
.heat .s1, .heat-legend .s1{ background:color-mix(in oklab, var(--carbon) 12%, var(--card)) }
.heat .s2, .heat-legend .s2{ background:color-mix(in oklab, var(--carbon) 26%, var(--card)) }
.heat .s3, .heat-legend .s3{ background:color-mix(in oklab, var(--carbon) 44%, var(--card)) }
.heat .s4, .heat-legend .s4{ background:color-mix(in oklab, var(--carbon) 68%, var(--card)); color:var(--heat-ink) }
.heat .s5, .heat-legend .s5{ background:var(--carbon); color:var(--heat-ink) }
.heat td.tot{ font-weight:800; color:var(--ink); background:var(--card-2) }
.heat-legend{ display:flex; align-items:center; gap:5px; font-size:.74rem; color:var(--muted); margin-top:10px; justify-content:flex-end }
.heat-legend i{ width:20px; height:10px; border-radius:3px; display:inline-block }
.pick-group{ background:var(--card); border-radius:16px; box-shadow:inset 0 0 0 1px var(--line); margin-bottom:12px; overflow:hidden }
.pick-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 14px; background:color-mix(in oklab, var(--ink) 4%, var(--card)); border-bottom:1px solid var(--line); font-weight:800; font-stretch:105% }
.pick-head small{ color:var(--muted); font-weight:650; font-size:.8rem }
.pick{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line) }
.pick:last-child{ border-bottom:0 }
.check{ width:40px; height:40px; border-radius:11px; border:0; box-shadow:inset 0 0 0 2px var(--line-2); background:var(--card); cursor:pointer; display:grid; place-items:center; color:transparent; transition:background-color .2s, box-shadow .2s, color .2s }
.check svg{ width:20px; height:20px; display:block }
.check svg path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .3s var(--ease) .05s }
.check[aria-pressed="true"]{ background:var(--ok); box-shadow:none; color:#fff }
.check[aria-pressed="true"] svg path{ stroke-dashoffset:0 }
.who{ min-width:0 }
.who b{ display:block; font-weight:720 }
.who small{ display:block; color:var(--muted); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pick.is-done .who b{ text-decoration:line-through; text-decoration-color:var(--muted); color:var(--muted) }
.amt{ font-weight:750; font-size:.92rem; white-space:nowrap }

/* ============ Dialog ============ */
dialog{ border:0; padding:0; border-radius:24px; background:var(--card); color:var(--ink); width:min(520px, calc(100% - 24px)); max-height:calc(100dvh - 32px); box-shadow:var(--shadow-lg) }
dialog::backdrop{ background:rgba(8,10,16,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
dialog[open]{ animation:dlg .38s var(--ease) }
@keyframes dlg{ from{ opacity:0; transform:translateY(18px) scale(.98) } }
.dlg-in{ padding:20px; overflow:auto; max-height:calc(100dvh - 32px) }
.dlg-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px }
.dlg-head h3{ font-size:1.3rem; font-weight:850; font-stretch:112%; letter-spacing:-.01em }
.dlg-in > form > p.muted, .dlg-in > p.muted{ font-size:.9rem; margin-bottom:14px }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.mini-products{ display:grid }
.mrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line) }
.mrow span{ font-size:.92rem; font-weight:650; min-width:0 }
.mrow small{ color:var(--muted); font-weight:500; white-space:nowrap }
.dlg-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px }

/* ============ Installer ============ */
.ip{ padding:20px 18px 18px }
.ip-steps{ list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px }
.ip-steps li{ display:grid; gap:7px; font-size:.74rem; font-weight:750; color:var(--muted); min-width:0 }
.ip-steps li::before{ content:""; height:4px; border-radius:2px; background:var(--line); transition:background-color .4s }
.ip-steps li.on::before{ background:var(--accent) }
.ip-steps li.cur{ color:var(--ink) }
.ip-steps li span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:600px){ .ip-steps li span{ display:none } }
.ip-kick{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-stretch:112%; margin-bottom:6px }
.ip-body{ display:grid; gap:24px }
@media (min-width:980px){ .ip-body{ grid-template-columns:1fr 300px; align-items:start; gap:36px } .ip-body.solo{ grid-template-columns:1fr } }
.ip-main{ min-width:0 }
.ip-title{ font-size:1.5rem; font-weight:850; font-stretch:115%; letter-spacing:-.02em; line-height:1.1; margin-bottom:6px }
.ip-sub{ color:var(--ink-2); margin-bottom:18px; font-size:.95rem }
.trades{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:20px }
@media (min-width:640px){ .trades{ grid-template-columns:repeat(3, 1fr) } }
.trade{ border:0; cursor:pointer; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); text-align:left; font-weight:650; font-size:.86rem; line-height:1.2; min-height:58px; transition:box-shadow .2s, background-color .2s }
.trade .art{ width:40px; height:40px; border-radius:11px; background:var(--card-2) }
.trade .art svg{ width:33px; height:33px }
.trade[aria-pressed="true"]{ box-shadow:inset 0 0 0 2px var(--accent); background:color-mix(in oklab, var(--accent) 7%, var(--card)) }
.pedit{ display:grid; grid-template-columns:44px 1fr 38px; gap:8px 10px; align-items:center; padding:12px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:10px; animation:view-in .4s var(--ease) }
.pedit .art{ width:44px; height:44px; border-radius:12px; background:var(--card-2) }
.pedit .art svg{ width:36px; height:36px }
.row2{ grid-column:1 / -1; display:grid; grid-template-columns:1.25fr .9fr .85fr; gap:8px }
.mini{ display:grid; gap:4px; min-width:0 }
.mini span{ font-size:.7rem; font-weight:750; color:var(--muted); text-transform:uppercase; letter-spacing:.05em }
.add-row{ width:100%; border:1.5px dashed var(--line-2); background:transparent; border-radius:16px; padding:14px; font-weight:700; color:var(--ink-2); cursor:pointer; min-height:52px; transition:border-color .2s, color .2s }
.add-row:hover{ border-color:var(--accent); color:var(--accent) }
.toggles{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px }
.tog{ border:0; font-weight:650; font-size:.86rem; padding:.55em .9em; border-radius:999px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2); cursor:pointer; min-height:40px; transition:background-color .2s, color .2s }
.tog[aria-pressed="true"]{ background:var(--ink); color:var(--bg); box-shadow:none }
.ip-nav{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }
.ip-preview{ position:sticky; top:90px; display:none }
@media (min-width:980px){ .ip-preview{ display:block } }
.phone{ max-width:290px; margin-inline:auto; border-radius:40px; padding:10px; background:#0B0C10; box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08) }
.phone-in{ border-radius:31px; overflow:hidden; background:var(--card); min-height:480px; color:var(--ink); position:relative }
.pv-hero{ padding:28px 16px 14px; background:radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--slip-pink) 60%, transparent), transparent 62%), radial-gradient(90% 80% at 100% 0%, color-mix(in oklab, var(--slip-yellow) 55%, transparent), transparent 60%); border-bottom:1px solid var(--line) }
.pv-hero .cp-kicker{ font-size:.58rem }
.pv-title{ font-weight:850; font-stretch:118%; font-size:1.2rem; line-height:1.05; letter-spacing:-.02em; margin-top:5px; overflow-wrap:anywhere }
.pv-msg{ font-size:.72rem; color:var(--ink-2); margin-top:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.pv-sec{ font-size:.66rem; font-weight:800; padding:12px 16px 6px }
.pv-days{ display:flex; gap:5px; padding:0 16px; overflow:hidden }
.pv-days span{ flex:none; font-size:.62rem; font-weight:700; padding:6px 7px; border-radius:9px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line) }
.pv-list{ padding:0 16px; display:grid; gap:6px }
.pv-item{ display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:center; font-size:.7rem }
.pv-item .art{ width:32px; height:32px; border-radius:9px; background:var(--card-2) }
.pv-item .art svg{ width:26px; height:26px }
.pv-item b{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pv-item span{ font-weight:700 }
.pv-bar{ position:absolute; left:12px; right:12px; bottom:12px; padding:10px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:.72rem; font-weight:750; text-align:center }
.pv-label{ text-align:center; margin-top:12px; font-size:.95rem }
.ip-done{ display:grid; gap:18px; justify-items:center; text-align:center; padding:6px 0 4px }
.done-card{ position:relative; width:min(460px, 100%); background:var(--card); border-radius:20px; padding:22px 20px 20px; box-shadow:inset 0 0 0 1px var(--line), var(--shadow); text-align:left }
.done-card .stamp{ top:18px; right:16px; font-size:1.05rem }
.kick{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-stretch:112% }
.done-card h3{ font-size:1.5rem; font-weight:850; font-stretch:115%; letter-spacing:-.02em; line-height:1.1; margin:6px 120px 6px 0; overflow-wrap:anywhere }
.done-card p{ color:var(--ink-2); font-size:.92rem }
.linkchip{ display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 12px; border-radius:12px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); font-weight:650; font-size:.9rem; overflow:hidden; white-space:nowrap }
.linkchip svg{ flex:none; color:var(--muted) }
.done-card .fine{ margin-top:10px; font-size:.8rem; color:var(--muted) }
.qr-card{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; width:min(460px, 100%); text-align:left; background:var(--card); border-radius:20px; padding:14px; box-shadow:inset 0 0 0 1px var(--line) }
.qr{ width:96px; height:96px; display:block; border-radius:8px }
.qr .qb{ fill:#FFFFFF } .qr g{ fill:#111318 }
.qr-card b{ display:block; font-weight:750 }
.qr-card p{ font-size:.86rem; color:var(--ink-2); margin-top:2px }
.qr-card p span{ color:var(--muted) }
.next{ list-style:none; padding:0; margin:0; width:min(460px, 100%); display:grid; gap:8px; text-align:left }
.next li{ display:flex; gap:10px; align-items:center; font-size:.92rem; color:var(--ink-2); font-weight:550 }
.next li::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent) }


/* ===== Toasts ===== */
/* ============ Toasts + confetti ============ */
.toasts{ position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); translate:-50% 0; z-index:100; display:grid; gap:8px; pointer-events:none; width:min(460px, calc(100% - 24px)) }
.toast{ pointer-events:auto; background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:14px; font-weight:650; font-size:.92rem; line-height:1.35; box-shadow:var(--shadow-lg); animation:toast-in .38s var(--spring) }
.toast.out{ animation:toast-out .3s var(--ease) forwards }
@keyframes toast-in{ from{ opacity:0; transform:translateY(14px) scale(.96) } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(8px) } }
.confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:95 }


/* ===== Petits écrans ===== */
/* ============ SEO / responsive ============ */
.h1 .h1-kick{ display:flex; width:fit-content; line-height:1.4 }
@media (max-width:379px){ .hide-xs{ display:none } }
.guide-link{ display:grid; gap:6px; margin-top:34px; max-width:860px; padding:22px 24px; border-radius:20px; text-decoration:none; color:var(--ink); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); position:relative; transition:box-shadow .25s, transform .25s var(--ease) }
.guide-link:hover{ box-shadow:inset 0 0 0 1.5px var(--accent); transform:translateY(-2px) }
.gl-kick{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-stretch:112% }
.guide-link b{ font-size:clamp(1.08rem, 1rem + .5vw, 1.32rem); font-weight:800; font-stretch:106%; line-height:1.25 }
.gl-go{ font-weight:700; color:var(--ink-2); font-size:.95rem }
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px }
.foot-links a{ color:var(--ink-2); text-decoration:none; font-weight:600 }
.foot-links a:hover{ text-decoration:underline }


/* ===== Photos et logo ===== */
/* ============ Photos et logo ============ */
.sr-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden }
.art{ overflow:hidden }
.art .ph, .ph-tile .ph{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }
button.art{ border:0; padding:0; cursor:zoom-in; font:inherit; color:inherit }
.hp img.ph{ width:26px; height:26px; border-radius:7px; object-fit:cover; flex:none }
.logo-av{ flex:none; width:52px; height:52px; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:var(--card); box-shadow:inset 0 0 0 1px var(--line) }
.logo-av img{ width:100%; height:100%; object-fit:cover; display:block }
.logo-av.fit-contain{ background:#fff }
.logo-av.fit-contain img{ object-fit:contain; padding:12% }
.logo-av.ini{ background:var(--ink); color:var(--bg); box-shadow:none; font-weight:850; font-stretch:115%; font-size:1rem; letter-spacing:.02em; line-height:1 }
.logo-av.xs{ width:22px; height:22px; border-radius:7px; font-size:.55rem }
.logo-av.sm{ width:42px; height:42px; border-radius:13px; font-size:.82rem }
.logo-av.lg{ width:60px; height:60px; border-radius:18px; font-size:1.1rem }
.logo-av.xl{ width:76px; height:76px; border-radius:22px; font-size:1.35rem }
.cp-id{ display:flex; align-items:center; gap:14px; margin:10px 0 12px }
.cp-id .cp-title{ margin:0; min-width:0 }
.mp-id{ display:flex; align-items:center; gap:12px; min-width:0 }
.mp-id > div{ min-width:0 }
.mp-av{ flex:none; border:0; padding:0; background:none; border-radius:18px; cursor:pointer; transition:transform .25s var(--ease) }
.mp-av:hover{ transform:scale(1.05) }
.mp-edit{ min-height:28px; padding:5px 0 0; font-size:.8rem }
.mp-edit svg{ width:14px; height:14px }
.pv-id{ display:flex; align-items:center; gap:9px; margin-top:7px }
.pv-id .pv-title{ margin-top:0; min-width:0 }
.pv-id .logo-av{ width:34px; height:34px; border-radius:11px; font-size:.68rem }
.sms-from{ display:inline-flex; align-items:center; gap:6px; font-weight:750; color:var(--ink-2) }
.logo-pick{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); outline:2px dashed transparent; outline-offset:-3px; transition:outline-color .2s, background-color .2s }
.logo-pick.drag, .ph-tile.drag{ outline-color:var(--accent); background:color-mix(in oklab, var(--accent) 7%, var(--card)) }
.lp-txt{ min-width:0 }
.lp-btns{ display:flex; flex-wrap:wrap; gap:6px }
.lp-txt small{ display:block; margin-top:7px; color:var(--muted); font-size:.8rem; line-height:1.35 }
.pedit{ grid-template-columns:56px 1fr 38px }
.ph-tile{ position:relative; width:56px; height:56px; border-radius:14px; border:0; padding:0; cursor:pointer; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; overflow:hidden; outline:2px dashed transparent; outline-offset:-3px; transition:outline-color .2s, transform .2s var(--ease) }
.ph-tile:hover{ transform:scale(1.04) }
.ph-tile svg{ width:42px; height:42px }
.ph-badge{ position:absolute; right:3px; bottom:3px; width:21px; height:21px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; box-shadow:0 0 0 2px var(--card) }
.ph-badge svg{ width:12px; height:12px }
.row3{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:-2px }
.link-btn{ border:0; background:transparent; color:var(--carbon); font-weight:700; font-size:.84rem; padding:6px 2px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; min-height:36px }
.link-btn.mute{ color:var(--muted) }
.zoom{ position:relative; display:grid; gap:12px }
.zoom img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:18px; display:block; background:var(--card-2) }
.zoom-cap b{ display:block; font-size:1.1rem; font-weight:800 }
.zoom-cap span{ color:var(--ink-2) }
.zoom .icon-btn{ position:absolute; top:10px; right:10px; background:color-mix(in oklab, var(--card) 85%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }


/* ===== Animations réduites ===== */
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *:not(.progress), *:not(.progress)::before, *:not(.progress)::after{ animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important }
  .hero-visual{ animation:none !important }
  .scr .meter i{ width:calc(var(--v) * 100%) }
  .js [data-reveal]{ opacity:1; transform:none }
}

/* ===== Tickets et pastilles (repris du site) ===== */
.tk{ position:relative; background:var(--card); border-radius:16px; box-shadow:inset 0 0 0 1px var(--line); --perf-y:calc(100% - 52px);
  -webkit-mask:radial-gradient(circle 9px at 0 var(--perf-y), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% var(--perf-y), #0000 97%, #000) right / 51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 var(--perf-y), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% var(--perf-y), #0000 97%, #000) right / 51% 100% no-repeat }
.tk-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px 4px }
.tk-no{ color:var(--accent); font-weight:800; font-stretch:75%; font-size:1.3rem; letter-spacing:.01em; line-height:1 }
.tk-name{ padding:2px 16px 0; font-weight:750; font-size:1.04rem }
.tk-items{ padding:3px 16px 0; color:var(--ink-2); font-size:.9rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.tk-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:52px; padding:0 16px; font-size:.84rem; color:var(--ink-2); border-top:1.5px dashed var(--line-2) }
.tk-foot b{ color:var(--ink); font-size:1rem; font-weight:800 }
.chip{ display:inline-flex; align-items:center; gap:.42em; font-size:.72rem; font-weight:750; padding:.34em .66em; border-radius:999px; white-space:nowrap; line-height:1.1 }
.chip i{ width:6px; height:6px; border-radius:50%; background:currentColor }
.chip-todo{ background:color-mix(in oklab, var(--warn) 22%, transparent); color:var(--warn-ink) }
.chip-ready{ background:color-mix(in oklab, var(--ok) 16%, transparent); color:var(--ok-ink) }
.chip-done{ background:var(--bg-2); color:var(--muted) }
.chip-cancel{ background:color-mix(in oklab, var(--crit) 14%, transparent); color:var(--crit) }
.stamp{ filter:none }

/* ===== Ajouts de l'appli : commun ===== */
body{ font-size:16px }
.fine{ font-size:.8rem; color:var(--muted); line-height:1.45 }
.fine a, .done-info a, .cp-msgbox a{ color:inherit }
.hpot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden }
.sr-file{ position:fixed; left:-9999px; width:1px; height:1px; opacity:0 }
.spinner{ width:28px; height:28px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--accent); animation:spin .8s linear infinite; margin:48px auto }
@keyframes spin{ to{ transform:rotate(360deg) } }
.brand{ display:inline-flex; align-items:center; gap:8px; font-weight:850; font-stretch:120%; letter-spacing:-.02em; text-decoration:none; color:var(--ink) }
.brand svg{ flex:none }

/* ===== Page de commande client ===== */
.page-client{ background:var(--bg) }
.client-wrap{ width:min(560px, 100%); margin:0 auto; background:var(--card); min-height:100vh; min-height:100dvh; box-shadow:0 0 0 1px var(--line) }
@media (min-width:600px){ .client-wrap{ margin:24px auto; min-height:auto; border-radius:var(--r-lg); overflow:clip; box-shadow:var(--shadow-lg), 0 0 0 1px var(--line) } }
.cp-step h2.cp-h{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:1.02rem; font-weight:800; font-stretch:108% }
.cp-hero h1.cp-title{ font-size:1.85rem }
.cp-contact{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:.86rem; color:var(--ink-2) }
.cp-contact a{ color:var(--ink); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:5px }
.cp-msgbox{ margin:22px 18px; padding:20px; border-radius:18px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:10px; justify-items:start }
.cp-msgbox h3{ font-size:1.15rem; font-weight:800 }
.cp-msgbox p{ color:var(--ink-2) }
.done-head h1.h-done{ margin:0 0 6px; font-size:1.6rem; font-weight:850; font-stretch:118%; letter-spacing:-.02em }
.done-head .cp-kicker{ display:block; margin-bottom:6px }
.done-info{ text-align:center; color:var(--ink-2); font-size:.92rem }
.tk-lines small{ color:var(--muted) }
.client-foot{ width:min(560px, 100%); margin:0 auto; padding:18px 18px 36px; text-align:center; font-size:.8rem; color:var(--muted) }
.client-foot a{ color:inherit }
.client-foot .brand{ font-size:.92rem; color:var(--ink-2) }

/* ===== Espace commerçant : cadre ===== */
.page-app{ background:var(--bg); min-height:100vh }
.ab{ position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line) }
.ab-in{ width:min(1100px, 100%); margin:0 auto; display:flex; align-items:center; gap:12px; height:58px; padding:0 16px }
.ab .brand{ font-size:1.12rem }
.ab-shop{ display:inline-flex; align-items:center; gap:8px; min-width:0; color:var(--ink-2); font-weight:650; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:12px; border-left:1px solid var(--line-2) }
.ab-shop span{ overflow:hidden; text-overflow:ellipsis }
.ab-in > .link-btn{ margin-left:auto }
.ab-nav{ display:none; margin-left:auto; gap:2px }
.nav-i{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink-2); font-weight:650; font-size:.92rem; padding:.5em .85em; border-radius:999px }
.nav-i:hover{ background:color-mix(in oklab, var(--ink) 6%, transparent); color:var(--ink) }
.nav-i[aria-current="page"]{ background:var(--ink); color:var(--bg) }
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:repeat(4, 1fr); background:color-mix(in oklab, var(--card) 94%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:6px 4px max(6px, env(safe-area-inset-bottom)) }
.tabbar .nav-i{ flex-direction:column; gap:3px; font-size:.7rem; padding:6px 2px; border-radius:12px; justify-content:center }
.tabbar .nav-i svg{ width:20px; height:20px }
.tabbar .nav-i[aria-current="page"]{ background:transparent; color:var(--accent) }
@media (min-width:860px){ .ab-nav{ display:flex } .tabbar{ display:none } }
.ab-main{ width:min(1100px, 100%); margin:0 auto; padding:16px 16px 110px }
@media (min-width:860px){ .ab-main{ padding:24px 24px 60px } }
#view-commercant .mp{ padding:0 }
.mp-head h1.mp-title{ margin-top:2px; font-size:1.5rem; font-weight:850; font-stretch:115%; letter-spacing:-.02em; line-height:1.1 }
.mp-id{ display:flex; align-items:center; gap:12px; min-width:0 }
.dchips{ margin:0 -16px; padding:2px 16px 8px }
.dchip.zero{ opacity:.72 }
.pbanner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-bottom:14px; padding:10px 12px 10px 16px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:.9rem; color:var(--ink-2) }
.pbanner.warn{ background:color-mix(in oklab, var(--warn) 14%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--warn) 45%, transparent) }
.pbanner.crit{ background:color-mix(in oklab, var(--crit) 10%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--crit) 40%, transparent); color:var(--ink) }
.link-btn{ border:0; background:none; padding:0; font:inherit; font-weight:700; color:var(--carbon); cursor:pointer; text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:6px }
.link-btn.mute{ color:var(--muted); font-weight:600 }
.otk-contact{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px 0 }
.mini-btn{ display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-size:.78rem; font-weight:700; color:var(--ink-2); padding:.42em .7em; border-radius:999px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line) }
.mini-btn:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2) }
.otk-foot .link-btn{ font-size:.8rem; margin-left:auto }
.stamp.cancel{ color:var(--crit) }
.prod-tools{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px }
.tool-btns{ display:flex; gap:6px; flex-wrap:wrap }

/* ===== Connexion ===== */
.auth{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; align-content:center; gap:14px; padding:24px 16px }
.auth-card{ width:min(440px, 100%); background:var(--card); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--line); display:grid; gap:12px }
.auth-card h1{ font-size:1.55rem; font-weight:850; font-stretch:112%; letter-spacing:-.02em; line-height:1.15; margin-top:6px }
.auth-card form{ display:grid; gap:4px; margin-top:6px }
.auth-card .btn.block{ margin-top:6px; min-height:50px }
.auth-links{ display:grid; gap:6px; font-size:.92rem; color:var(--ink-2) }
.auth-foot{ font-size:.8rem; color:var(--muted); text-align:center }
.auth-foot a{ color:inherit }
.check-line{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--ink-2); margin:4px 0 8px; line-height:1.4 }
.check-line input{ width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--accent) }
.check-line a{ color:var(--ink) }

/* ===== Ma page, abonnement, compte ===== */
.pg{ display:grid; gap:14px; max-width:760px; margin:0 auto }
.card-b{ background:var(--card); border-radius:var(--r-md); padding:20px; box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:10px; justify-items:start }
.card-b h2{ font-size:1.12rem; font-weight:800 }
.card-b.danger{ box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--crit) 35%, transparent) }
.pg-title{ font-size:1.6rem; font-weight:850; font-stretch:115%; letter-spacing:-.02em; line-height:1.1 }
.kick{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent) }
.linkchip.big{ font-size:1rem; padding:.7em 1em; max-width:100%; overflow-wrap:anywhere }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px }
.qr-block{ grid-template-columns:auto 1fr; align-items:center; gap:18px }
@media (max-width:560px){ .qr-block{ grid-template-columns:1fr; justify-items:center; text-align:center } .qr-block .btn-row{ justify-content:center } }
.qr-box{ width:180px; padding:8px; background:#fff; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line) }
.qr-box svg{ display:block; width:100%; height:auto }
.share-txt{ white-space:pre-wrap; font:inherit; font-size:.92rem; margin:0; padding:14px; border-radius:14px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); width:100% }
.plan-status{ display:grid; gap:6px; width:100%; padding:14px 16px; border-radius:16px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line) }
.plan-status span{ color:var(--ink-2); font-size:.94rem }
.plan-status.ok{ background:color-mix(in oklab, var(--ok) 10%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ok) 40%, transparent) }
.plan-status.crit{ background:color-mix(in oklab, var(--crit) 9%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--crit) 35%, transparent) }
.plan-status .meter{ margin-top:4px }
.offers{ display:grid; gap:10px; width:100% }
@media (min-width:700px){ .offers{ grid-template-columns:repeat(auto-fit, minmax(0, 1fr)) } }
.offer{ display:grid; gap:8px; align-content:start; padding:16px; border-radius:18px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line) }
.offer.best{ background:color-mix(in oklab, var(--accent) 6%, var(--card)); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent) }
.offer b{ font-size:1.8rem; font-weight:850; letter-spacing:-.02em; line-height:1.1 }
.offer b small{ font-size:.9rem; font-weight:650; color:var(--muted) }
.offer p{ font-size:.88rem; color:var(--ink-2) }
.row-form{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; width:100% }
.row-form .field{ flex:1 1 220px; margin:0 }

/* ===== Assistant de création ===== */
#view-installer .ip{ padding:0 }
h1.ip-title{ font-size:1.45rem }
.cal{ margin-bottom:16px; max-width:420px }
.cal-h, .cal-g{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px }
.cal-h span{ text-align:center; font-size:.68rem; font-weight:750; color:var(--muted); text-transform:uppercase; padding-bottom:4px }
.cal-d{ position:relative; aspect-ratio:1; border:0; border-radius:10px; background:var(--card-2); color:var(--muted); font-weight:700; font-size:.85rem; cursor:pointer; display:grid; place-items:center; align-content:center; line-height:1; box-shadow:inset 0 0 0 1px var(--line) }
.cal-d small{ font-size:.55rem; font-weight:700; margin-top:2px }
.cal-d.on{ background:var(--ink); color:var(--bg); box-shadow:none }
.cal-d.sp::after{ content:""; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%; background:var(--accent) }
.cal-d:disabled{ opacity:.35; cursor:default }
.slug-in{ display:flex; align-items:center; border-radius:14px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line-2); overflow:hidden }
.slug-in span{ padding:0 0 0 14px; color:var(--muted); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55% }
.slug-in .input{ box-shadow:none; background:transparent; padding-left:2px }
.slug-in:focus-within{ box-shadow:inset 0 0 0 2px var(--carbon) }
.slug-st{ font-size:.82rem; font-weight:650; color:var(--muted) }
.slug-st.ok{ color:var(--ok-ink) }
.slug-st.bad{ color:var(--crit) }
.recap{ display:grid; gap:4px; padding:14px 16px; border-radius:16px; background:color-mix(in oklab, var(--ok) 9%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ok) 35%, transparent); font-size:.92rem; color:var(--ink-2); margin-top:6px }
.recap b{ color:var(--ink) }
.ph-tile.is-up{ opacity:.55; pointer-events:none }
.ph-tile.is-up::after{ content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--accent); animation:spin .8s linear infinite }
.ip-main > .link-btn{ margin-top:12px }

/* ===== Impression : listes et affiche QR code ===== */
.poster{ display:none }
@media print{
  @page{ margin:12mm }
  body{ background:#fff !important; color:#000 }
  .ab, .tabbar, .pbanner, .dchips, .kpis, .subtabs, .tool-btns, .fchips, .mp-head .btn, .toasts, .otk-contact, .otk-foot .act, .otk-foot .link-btn, .check{ display:none !important }
  .ab-main{ padding:0 !important; width:100% !important }
  .tk, .card-b, .kpi, .prod-row, .pick{ box-shadow:none !important; border:1px solid #bbb; -webkit-mask:none !important; mask:none !important }
  .olist{ display:block !important }
  .otk{ break-inside:avoid; margin-bottom:8px }
  body.print-poster .ab-main > *:not(#screen), body.print-poster #screen .pg{ display:none !important }
  body.print-poster .poster{ display:grid !important; justify-items:center; text-align:center; gap:10px; padding-top:10mm }
  .poster-kick{ font-size:22pt; font-weight:800; color:#D93A1C; text-transform:uppercase; letter-spacing:.08em }
  .poster h1{ font-size:34pt; font-weight:900; line-height:1.1 }
  .poster-sub{ font-size:14pt; max-width:150mm }
  .poster-qr{ width:120mm }
  .poster-qr svg{ width:100%; height:auto; display:block }
  .poster-url{ font-size:14pt; font-weight:700 }
}
.page-app .toasts{ bottom:calc(84px + env(safe-area-inset-bottom)) }
@media (min-width:860px){ .page-app .toasts{ bottom:max(16px, env(safe-area-inset-bottom)) } }
.ab-in > .link-btn{ white-space:nowrap; flex:none }
.ab-shop{ flex:1 1 auto }