:root{
  --laque:#0A0A0A; --graphite:#16171A; --graphite2:#222328; --trait:#2B2C31;
  --emeraude:#0E9F6E; --emeraude-v:#19D18F; --chrome:#C8CCD2; --texte:#F2F3F5; --doux:#9A9DA4;
  --kraft:#C9A878; --papier:#F3F0E8; --encre:#16171A;
  --accent:var(--emeraude); --accent-txt:#04150E;
  --chrome-g:linear-gradient(180deg,#ffffff 0%,#d9dce0 38%,#7d828a 52%,#eef0f2 78%,#b9bdc4 100%);
}
body.gros{ --accent:#D7DADF; --accent-txt:#111; }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip;background:#000}
body{font:15px/1.45 Manrope,system-ui,sans-serif;color:var(--texte);background:#000;touch-action:pan-x pan-y;overflow-x:clip;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;font-size:16px;color:var(--texte)}
[hidden]{display:none!important}
img{display:block;max-width:100%}
.chrome{background:var(--chrome-g);-webkit-background-clip:text;background-clip:text;color:transparent}

.app{max-width:480px;min-height:100dvh;margin:0 auto;background:var(--laque);position:relative;padding-bottom:96px;overflow-x:clip}

/* ---------- En-tête ---------- */
.top{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:30;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;transition:background .3s}
.top.plein{background:rgba(10,10,10,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--trait)}
.brand img{width:38px;height:38px;border-radius:11px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.5)}
.mode{position:relative;flex:1;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;background:rgba(18,19,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.mode button{position:relative;z-index:1;height:34px;font-weight:800;font-size:14px;color:var(--doux);transition:color .3s}
.mode button[aria-selected=true]{color:var(--accent-txt)}
.mode-pill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:34px;border-radius:99px;background:linear-gradient(180deg,#22c98b,#0B8A5F);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 16px rgba(14,159,110,.45)}
body.gros .mode-pill{background:linear-gradient(180deg,#fafbfc,#a9aeb5);box-shadow:inset 0 1px 0 #fff,0 4px 16px rgba(200,204,210,.3)}
.pill-btn{height:38px;min-width:38px;padding:0 10px;border-radius:99px;background:rgba(18,19,22,.72);border:1px solid rgba(255,255,255,.12);font-weight:800;font-size:12px}

/* ---------- Héros ---------- */
.hero{position:relative;height:min(100dvh,860px);min-height:640px;overflow:hidden;background:#050505}
.h-fond{position:absolute;inset:-6% -6% -6% -6%;}
.h-fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-fond .f-gros{visibility:hidden}
body.gros .h-fond .f-gros{visibility:visible}
body.gros .h-fond .f-detail{visibility:hidden}
.h-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.75) 0%,rgba(5,5,5,.15) 26%,rgba(5,5,5,.1) 55%,rgba(5,5,5,.92) 88%,#0A0A0A 100%)}
.h-logo{position:absolute;top:calc(env(safe-area-inset-top) + 64px);left:50%;width:min(74%,330px);margin-left:calc(min(74%,330px) / -2);filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.h-logo .eclat{position:absolute;width:26px;height:26px;pointer-events:none;transform:scale(0)}
.h-logo .eclat::before,.h-logo .eclat::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;box-shadow:0 0 10px #fff,0 0 18px var(--emeraude-v)}
.h-logo .eclat::before{width:2px;height:26px;margin:-13px 0 0 -1px}
.h-logo .eclat::after{width:26px;height:2px;margin:-1px 0 0 -13px}
.h-perso{position:absolute;right:-6%;bottom:calc(env(safe-area-inset-bottom) + 150px);width:56%;max-width:280px}
.h-perso img{width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7))}
.h-perso .p-gros{position:absolute;inset:auto 0 0 0;visibility:hidden}
body.gros .h-perso .p-gros{visibility:visible}
body.gros .h-perso .p-detail{visibility:hidden}
.h-sol{position:absolute;right:2%;bottom:calc(env(safe-area-inset-bottom) + 140px);width:56%;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(25,209,143,.35),transparent)}
body.gros .h-sol{background:radial-gradient(closest-side,rgba(215,218,223,.25),transparent)}
.h-texte{position:absolute;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 112px)}
.h-sur{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--emeraude-v);margin-bottom:8px;display:flex;align-items:center;gap:8px}
body.gros .h-sur{color:var(--chrome)}
.h-sur::before{content:"";width:22px;height:2px;background:currentColor}
.h-titre{font:italic 900 46px/.92 Archivo,sans-serif;letter-spacing:-.01em;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.h-titre span{display:block;overflow:hidden;padding:0 .14em .04em 0;margin-bottom:-.04em}
.h-titre span i{display:block;font-style:inherit}
.h-titre .chrome{text-shadow:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.h-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.btn{height:52px;padding:0 22px;border-radius:99px;font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#22c98b,#0B8A5F);color:var(--accent-txt);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px rgba(14,159,110,.4)}
body.gros .btn{background:linear-gradient(180deg,#fafbfc,#a9aeb5);box-shadow:inset 0 1px 0 #fff,0 10px 26px rgba(200,204,210,.22)}
.btn svg{width:18px;height:18px}
.btn.plein{width:100%;justify-content:center;margin-top:16px;height:56px;font-size:16px;border-radius:18px}
.btn:disabled{filter:grayscale(1);opacity:.45}
.btn.fantome{background:var(--graphite2);color:var(--texte);box-shadow:inset 0 0 0 1px var(--trait)}

/* ---------- Sections ---------- */
.sec{padding:34px 18px 0}
.sur{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--doux);display:flex;align-items:center;gap:8px}
.sur::before{content:"";width:18px;height:2px;background:var(--accent)}
.titre{font:italic 900 32px/1 Archivo,sans-serif;margin-top:8px}

/* Les vitrines (univers) */
.vitrines{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:18px -18px 0;padding:6px 18px 14px;scrollbar-width:none}
.vitrines::-webkit-scrollbar{display:none}
.vit{flex:0 0 72%;scroll-snap-align:center;position:relative;height:300px;border-radius:24px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,#141519 0%,#0c0d0f 70%);border:1px solid #2e3036;perspective:800px}
.vit .verre{position:absolute;inset:12px 12px 70px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,0) 40%),radial-gradient(70% 50% at 50% 100%,rgba(25,209,143,.22),transparent)}
body.gros .vit .verre{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,0) 40%),radial-gradient(70% 50% at 50% 100%,rgba(215,218,223,.16),transparent)}
.vit .verre::after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:3px;border-radius:3px;background:var(--emeraude-v);box-shadow:0 0 18px 2px var(--emeraude-v)}
body.gros .vit .verre::after{background:#e8eaee;box-shadow:0 0 18px 2px rgba(232,234,238,.6)}
.vit img{position:absolute;left:18%;right:18%;top:30px;width:64%;height:190px;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
.vit .lg{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end}
.vit b{font:italic 900 21px/1 Archivo,sans-serif}
.vit small{font:700 11px 'JetBrains Mono',monospace;color:var(--doux)}

/* L'arrivage (étiquette de transport) */
.etiquette{margin-top:18px;border-radius:18px;background:var(--papier);color:var(--encre);overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45);transform:rotate(-1.2deg)}
.et-haut{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--encre);color:var(--papier)}
.et-haut b{font:900 18px Archivo,sans-serif;letter-spacing:.04em}
.et-haut span{font:700 11px 'JetBrains Mono',monospace;color:var(--emeraude-v)}
.et-code{height:34px;margin:12px 16px 4px;background:repeating-linear-gradient(90deg,#16171A 0 2px,transparent 2px 4px,#16171A 4px 5px,transparent 5px 8px,#16171A 8px 11px,transparent 11px 13px)}
.et-meta{display:flex;justify-content:space-between;font:700 11px 'JetBrains Mono',monospace;padding:0 16px 8px;color:#5b5d63}
.et-l{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;border-top:1px dashed #b9b5aa;text-align:left}
.et-l img{width:46px;height:46px;object-fit:contain}
.et-l .n{flex:1;min-width:0}
.et-l .n b{display:block;font-size:14px;line-height:1.2}
.et-l .n small{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#6b6d73;text-transform:uppercase}
.et-l .p{font:900 15px Archivo,sans-serif;white-space:nowrap}

/* À la une (socle sous projecteur) */
.une{position:relative;margin-top:18px;border-radius:26px;overflow:hidden;padding:26px 18px 20px;background:radial-gradient(60% 46% at 50% 0%,rgba(255,255,255,.16),transparent 70%),linear-gradient(180deg,#121316,#0a0a0b);border:1px solid #2e3036;text-align:center}
.une .faisceau{position:absolute;left:50%;top:-20px;width:70%;height:300px;margin-left:-35%;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);pointer-events:none}
.une img{position:relative;width:72%;margin:0 auto;height:230px;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(0,0,0,.7))}
.socle{width:62%;height:26px;margin:-6px auto 0;border-radius:50%;background:radial-gradient(closest-side,#3a3c42,#1a1b1f 70%,transparent);box-shadow:0 0 30px rgba(25,209,143,.2)}
.une .mq{margin-top:16px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.une h3{font:italic 900 26px/1.05 Archivo,sans-serif;margin-top:6px}
.une .px{font:900 22px Archivo,sans-serif;margin-top:8px}

/* Le dépôt (paliers du gros, bon de commande carbone) */
.bon{margin-top:18px;border-radius:18px;background:var(--papier);color:var(--encre);padding:18px 16px;box-shadow:0 20px 40px rgba(0,0,0,.45);position:relative}
.bon::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;background:radial-gradient(circle at 8px 8px,var(--laque) 6px,transparent 6.5px) 0 0/16px 16px repeat-x}
.bon h4{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6b6d73}
.bon .gros-t{font:italic 900 26px/1.05 Archivo,sans-serif;margin-top:4px}
.paliers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.paliers div{border:1.5px solid var(--encre);border-radius:12px;padding:10px 4px;text-align:center}
.paliers strong{display:block;font:italic 900 24px Archivo,sans-serif}
.paliers span{font:700 10px 'JetBrains Mono',monospace;color:#5b5d63}
.paliers .on{background:var(--encre);color:var(--papier)}
.paliers .on span{color:var(--emeraude-v)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.card{border-radius:20px;background:linear-gradient(180deg,#17181c,#111214);border:1px solid #2a2c31;overflow:hidden;text-align:left;display:flex;flex-direction:column;position:relative}
.card .ph{aspect-ratio:1;padding:14px;background:radial-gradient(70% 60% at 50% 35%,#2b2d33,#141518 75%)}
.card .ph img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.card .tx{padding:10px 12px 14px}
.card .mq{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.card .nm{font-size:13px;font-weight:600;line-height:1.25;margin-top:3px;min-height:32px}
.card .px{font:900 17px Archivo,sans-serif;margin-top:6px}
.card .px small{font:700 10px 'JetBrains Mono',monospace;color:var(--doux)}
.card .plus{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:20px;font-weight:800}

/* La caisse (ticket) */
.ticket{margin-top:18px;background:var(--papier);color:var(--encre);padding:20px 18px 26px;font-family:'JetBrains Mono',monospace;position:relative;box-shadow:0 20px 40px rgba(0,0,0,.45);
  -webkit-mask:radial-gradient(circle at 8px 100%,transparent 7px,#000 7.5px) 0 100%/16px 16px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 15px) no-repeat;
  mask:radial-gradient(circle at 8px 100%,transparent 7px,#000 7.5px) 0 100%/16px 16px repeat-x,linear-gradient(#000,#000) 0 0/100% calc(100% - 15px) no-repeat}
.ticket .tt{text-align:center;font:italic 900 22px Archivo,sans-serif}
.ticket .ts{text-align:center;font-size:11px;color:#6b6d73;margin-top:2px}
.ticket ol{list-style:none;margin-top:14px;border-top:1.5px dashed #9a978f}
.ticket li{display:flex;gap:12px;padding:12px 0;border-bottom:1.5px dashed #c9c5ba;font-size:13px;line-height:1.35}
.ticket li b{font-family:Archivo,sans-serif;font-weight:900;font-size:18px;min-width:22px}
.ticket .modes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ticket .modes span{border:1.5px solid var(--encre);border-radius:99px;padding:2px 8px;font-size:11px;font-weight:700}

/* ---------- Pages ---------- */
.page{padding:calc(env(safe-area-inset-top) + 70px) 18px 0}
.pills{display:flex;gap:8px;overflow-x:auto;margin:14px -18px 0;padding:0 18px 2px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;height:36px;padding:0 15px;border-radius:99px;background:var(--graphite);border:1px solid var(--trait);font-weight:700;font-size:13px;white-space:nowrap}
.pill.on{background:var(--texte);color:#0A0A0A;border-color:var(--texte)}
.pill.mq{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;height:32px}
.pill.mq.on{background:var(--accent);border-color:var(--accent);color:var(--accent-txt)}
.u-tete{position:relative;height:190px;margin:0 -18px;overflow:hidden;border-bottom:1px solid var(--trait)}
.u-tete .fd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.u-tete::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.4),#0A0A0A)}
.u-tete .pr{position:absolute;right:10px;bottom:-6px;width:150px;height:150px;object-fit:contain;z-index:1;filter:drop-shadow(0 14px 18px rgba(0,0,0,.7))}
.u-tete .tx{position:absolute;left:18px;bottom:18px;z-index:1}
.retour{display:inline-flex;align-items:center;gap:6px;color:var(--doux);font-weight:700;font-size:14px;margin-bottom:10px}

.p-scene{position:relative;margin:0 -18px;height:360px;overflow:hidden;background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.14),transparent 70%),linear-gradient(180deg,#121316,#0a0a0b)}
.p-scene .faisceau{position:absolute;left:50%;top:-20px;width:80%;height:340px;margin-left:-40%;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.p-scene img{position:absolute;left:14%;right:14%;top:40px;width:72%;height:260px;object-fit:contain;filter:drop-shadow(0 24px 24px rgba(0,0,0,.75))}
.p-scene .socle{position:absolute;left:19%;bottom:30px;width:62%;margin:0}
.p-mq{margin-top:18px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.p-nm{font:italic 900 28px/1.05 Archivo,sans-serif;margin-top:6px}
.p-px{font:900 28px Archivo,sans-serif;margin-top:10px;display:flex;align-items:baseline;gap:8px}
.p-px small{font:700 11px 'JetBrains Mono',monospace;color:var(--doux)}
.p-px s{font:600 15px Manrope;color:var(--doux)}
.lbl{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin:20px 0 10px}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:50px;height:44px;padding:0 10px;border-radius:12px;background:var(--graphite);border:1px solid var(--trait);font-weight:800}
.size.on{background:var(--texte);color:#0A0A0A}
.step{display:inline-flex;align-items:center;border-radius:12px;background:var(--graphite);border:1px solid var(--trait)}
.step button{width:44px;height:44px;font-size:20px;font-weight:800}
.step b{min-width:30px;text-align:center;font-family:'JetBrains Mono',monospace}

/* Grille tailles × quantités (bon de commande) */
.bon-g{border-radius:16px;background:var(--papier);color:var(--encre);overflow:hidden}
.bon-g .row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:4px 6px 4px 16px;border-top:1.5px dashed #c9c5ba}
.bon-g .row:first-child{border-top:0}
.bon-g .row span{font:700 15px 'JetBrains Mono',monospace}
.bon-g .step{background:none;border:0}
.bon-g .step button{color:var(--encre);width:40px;height:40px}
.bon-g .row.rempli{background:#e7e3d8}
.sum{margin-top:14px;border-radius:16px;padding:14px 16px;background:var(--graphite);border:1px solid var(--trait)}
.sum .l{display:flex;justify-content:space-between;margin:3px 0;color:var(--doux);font-size:14px}
.sum .l b{color:var(--texte)}
.sum .t{display:flex;justify-content:space-between;font:900 22px Archivo,sans-serif;color:var(--texte);margin-top:8px;padding-top:8px;border-top:1px solid var(--trait)}
.jauge{height:8px;border-radius:9px;background:#2a2b30;margin-top:10px;overflow:hidden}
.jauge i{display:block;height:100%;width:0;border-radius:9px;background:var(--accent)}
.warn{margin-top:8px;font-size:13px;color:#F5B94A}

.line{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px dashed #c9c5ba}
.line:first-of-type{border-top:0}
.line img{width:60px;height:60px;object-fit:contain}
.line .i{flex:1;min-width:0}
.line .i b{display:block;font-family:Manrope;font-size:14px}
.line .i small{color:#6b6d73;font-size:11px}
.line .pr{font:900 15px Archivo,sans-serif;white-space:nowrap}
.line .x{color:#6b6d73;font-size:20px;width:30px;height:30px}
.ticket.panier{padding-top:18px}
.ticket .total{display:flex;justify-content:space-between;font:italic 900 22px Archivo,sans-serif;border-top:1.5px dashed #9a978f;padding-top:12px;margin-top:4px}
.vide{text-align:center;padding:30px 0 10px}
.vide img{width:170px;margin:0 auto}
.vide p{color:var(--doux);margin-top:10px}

.f{display:block;margin-top:12px}
.f span{display:block;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);margin-bottom:6px}
.f input{width:100%;height:50px;border-radius:14px;border:1px solid var(--trait);background:var(--graphite);padding:0 14px;outline:none}
.f input:focus{border-color:var(--accent)}
.choix{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choix.trois{grid-template-columns:repeat(3,1fr)}
.ch{min-height:50px;border-radius:14px;border:1px solid var(--trait);background:var(--graphite);font-weight:800;font-size:13px;padding:8px}
.ch.on{border-color:var(--accent);background:rgba(25,209,143,.1);box-shadow:inset 0 0 0 1px var(--accent)}
body.gros .ch.on{background:rgba(215,218,223,.08)}
.pay{margin-top:14px;border-radius:16px;padding:14px 16px;background:var(--graphite);border:1px solid var(--trait)}
.pay .k{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);margin-top:12px}
.pay .k:first-child{margin-top:0}
.pay .val{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;word-break:break-all;margin-top:3px}
.pay .val button{flex:0 0 auto;font:800 12px Manrope;padding:7px 11px;border-radius:99px;background:var(--graphite2)}
.note{font-size:13px;color:var(--doux);margin-top:10px}

.ok{text-align:center}
.ok .perso{width:200px;margin:0 auto}
.ok h2{font:italic 900 30px/1 Archivo,sans-serif;margin-top:6px}
.ok .num{font:700 12px 'JetBrains Mono',monospace;color:var(--doux);margin-top:8px}
.suivi{margin-top:20px;text-align:left;border-radius:16px;background:var(--graphite);border:1px solid var(--trait);padding:4px 16px}
.suivi div{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--trait);color:var(--doux);font-size:14px}
.suivi div:first-child{border-top:0}
.suivi i{width:24px;height:24px;border-radius:50%;border:2px solid var(--trait);flex:0 0 auto;font-style:normal;display:grid;place-items:center;font-size:12px;font-weight:800}
.suivi .fait{color:var(--texte)}.suivi .fait i{background:var(--emeraude);border-color:var(--emeraude);color:#fff}
.suivi .cours{color:var(--texte)}.suivi .cours i{border-color:var(--emeraude-v);border-top-color:transparent;animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

.q{border-top:1px solid var(--trait)}
.q button{width:100%;text-align:left;padding:18px 0;font-weight:800;display:flex;justify-content:space-between;gap:10px;font-size:15px}
.q button i{font-style:normal;color:var(--accent);transition:transform .3s}
.q.ouvert button i{transform:rotate(45deg)}
.q p{color:var(--doux);padding:0 0 18px;overflow:hidden}
.edit{margin-top:18px;font:700 11px 'JetBrains Mono',monospace;color:var(--doux);border:1px dashed var(--trait);border-radius:12px;padding:12px}

/* ---------- Barre du bas ---------- */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);background:rgba(12,12,13,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--trait)}
.tabs>button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--doux);padding:4px 0}
.tabs svg{width:23px;height:23px;fill:currentColor}
.tabs button.on{color:var(--texte)}
.tabs button.on svg{fill:var(--accent)}
.fab{width:62px;height:62px;margin:-30px auto 0;border-radius:50%;display:grid!important;place-items:center;position:relative;color:var(--accent-txt)!important;
  background:linear-gradient(180deg,#22c98b,#0B8A5F);box-shadow:0 0 0 5px #0c0c0d,inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px rgba(14,159,110,.5)}
body.gros .fab{background:linear-gradient(180deg,#fafbfc,#a9aeb5);box-shadow:0 0 0 5px #0c0c0d,inset 0 1px 0 #fff,0 10px 26px rgba(200,204,210,.3)}
.fab svg{width:26px;height:26px;fill:none!important}
.fab b{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;border-radius:99px;background:#fff;color:#0A0A0A;font-size:12px;display:grid;place-items:center;padding:0 6px;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Rideau métallique (passage Détail ↔ Gros) */
.rideau{position:fixed;left:50%;top:0;width:100%;max-width:480px;height:100dvh;margin-left:-240px;z-index:45;pointer-events:none;transform:translateY(-101%)}
@media(max-width:480px){.rideau{margin-left:0;left:0}}
.rideau i{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#d9dce0 0,#9da2a9 9px,#5e636a 11px,#c8ccd2 13px,#e8eaed 22px);box-shadow:0 10px 40px rgba(0,0,0,.7)}
.rideau i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(180deg,#3a3d42,#15161a)}

/* Feuilles */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40}
.sheet{position:fixed;left:50%;bottom:0;margin-left:-240px;width:100%;max-width:480px;z-index:41;background:#141518;border-radius:26px 26px 0 0;border-top:1px solid var(--trait);padding:10px 20px calc(env(safe-area-inset-bottom) + 24px);max-height:88dvh;overflow-y:auto}
@media(max-width:480px){.sheet{margin-left:0;left:0}}
.sheet .grip{width:40px;height:5px;border-radius:9px;background:#3a3c42;margin:0 auto 16px}
.sheet h3{font:italic 900 24px Archivo,sans-serif;margin-bottom:6px}
.sheet .ico{width:76px;height:76px;border-radius:18px;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.os{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.etapes{counter-reset:e;margin-top:10px}
.etapes li{list-style:none;counter-increment:e;display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--trait);font-size:14px}
.etapes li::before{content:counter(e);flex:0 0 30px;height:30px;border-radius:50%;background:var(--graphite2);display:grid;place-items:center;font-weight:800;font-size:13px}
.etapes svg{width:20px;height:20px;vertical-align:-4px;fill:var(--texte)}
.langs button{display:flex;width:100%;justify-content:space-between;padding:18px 4px;border-top:1px solid var(--trait);font-weight:800;font-size:16px}
.langs button.on{color:var(--emeraude-v)}

.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:50;background:var(--texte);color:#0A0A0A;font-weight:800;font-size:14px;padding:11px 18px;border-radius:99px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vol{position:fixed;z-index:60;pointer-events:none;width:80px;height:80px;object-fit:contain}

/* Avis (cartes de pure typo qui défilent) */
.avis-note{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.avis-note b{font:italic 900 54px/1 Archivo,sans-serif}
.avis-note span{color:var(--emeraude-v);letter-spacing:2px}
body.gros .avis-note span{color:var(--chrome)}
.avis-note small{font:700 11px 'JetBrains Mono',monospace;color:var(--doux)}
.avis-piste{margin:16px -18px 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.avis-piste::-webkit-scrollbar{display:none}
.avis-rail{display:flex;gap:12px;width:max-content;padding:4px 18px 8px}
.avis{scroll-snap-align:center}
.avis-points{display:flex;justify-content:center;gap:6px;margin-top:10px}
.avis-points i{width:6px;height:6px;border-radius:9px;background:#3a3c42;transition:width .3s,background .3s}
.avis-points i.on{width:18px;background:var(--accent)}
.avis{width:250px;flex:0 0 auto;border-radius:20px;padding:18px;background:linear-gradient(180deg,#18191d,#111214);border:1px solid #2a2c31;display:flex;flex-direction:column;gap:12px}
.avis .et{color:var(--emeraude-v);letter-spacing:2px;font-size:13px}
body.gros .avis .et{color:var(--chrome)}
.avis blockquote{font:italic 800 17px/1.3 Archivo,sans-serif;flex:1}
.avis figcaption{font:700 11px 'JetBrains Mono',monospace;color:var(--doux);display:flex;align-items:center;gap:6px}
.avis figcaption b{color:var(--texte)}
.avis figcaption em{font-style:normal;margin-left:auto;padding:2px 8px;border-radius:99px;border:1px solid var(--trait);color:var(--chrome)}
.avis-ex{font:600 11px Manrope;color:#6b6e75;margin-top:6px}

/* Profil */
.carte-id{display:flex;align-items:center;gap:16px;padding:18px;border-radius:22px;background:radial-gradient(80% 120% at 0% 0%,rgba(25,209,143,.16),transparent 60%),linear-gradient(180deg,#18191d,#111214);border:1px solid #2e3036}
.avatar{width:66px;height:66px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font:italic 900 30px Archivo,sans-serif;color:#111;background:var(--chrome-g);box-shadow:0 0 0 3px #0A0A0A,0 0 0 4px var(--emeraude)}
.carte-id h1{font:italic 900 26px/1 Archivo,sans-serif}
.carte-id p{color:var(--doux);font-size:13px;margin-top:4px}
.carte-id p b{color:var(--texte)}
.liste{border-radius:18px;background:var(--graphite);border:1px solid var(--trait);overflow:hidden}
.liste .li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--trait);font-size:14px}
.liste .li:first-child{border-top:0}
.liste .li span{color:var(--doux);font:600 12px 'JetBrains Mono',monospace;text-align:right}
.liste .cmd span{display:flex;flex-direction:column;gap:3px;text-align:left}
.liste .cmd b{color:var(--texte);font:800 14px Manrope}
.liste .cmd small{color:var(--doux);font:600 11px 'JetBrains Mono',monospace}
.liste .cmd .r{align-items:flex-end}
.liste .cmd em{font-style:normal;font:700 10px 'JetBrains Mono',monospace;color:#F5B94A}
.carte-app{display:flex;align-items:center;gap:14px;width:100%;margin-top:20px;padding:14px;border-radius:18px;text-align:left;background:linear-gradient(135deg,#1c1d22,#121316);border:1px solid #33363c}
.carte-app img{width:52px;height:52px;border-radius:13px}
.carte-app span{flex:1;display:flex;flex-direction:column}
.carte-app b{font-size:15px}
.carte-app small{color:var(--doux);font-size:12px}
.carte-app i{font-style:normal;font-weight:800;font-size:13px;padding:9px 14px;border-radius:99px;background:linear-gradient(180deg,#22c98b,#0B8A5F);color:#04150E}
.oublier{display:block;margin:22px auto 0;color:#6b6e75;font-size:13px;text-decoration:underline}
body.gros .h-perso .p-gros{transform:scale(.88);transform-origin:50% 100%}

/* Moteur Chine : ruptures */
.size:disabled{opacity:.3;text-decoration:line-through}
.bon-g .row.rupt{background:repeating-linear-gradient(135deg,#ece8de 0 8px,#e3dfd4 8px 16px);padding:12px 16px}
.bon-g .row.rupt span{opacity:.45;text-decoration:line-through}
.bon-g .row.rupt em{font:700 11px 'JetBrains Mono',monospace;font-style:normal;color:#9a5b2b;text-transform:uppercase}
.card .plus.epuise{width:auto;padding:0 10px;border-radius:99px;font:700 10px 'JetBrains Mono',monospace;text-transform:uppercase;color:#F5B94A}
.liste .cmd em[data-etat=payee]{color:var(--emeraude-v)}.liste .cmd em[data-etat=expediee]{color:#8fd3ff}.liste .cmd em[data-etat=refusee]{color:#ff8a8a}

/* Gros : prix du vendeur et économie calculée (12/11, plus de paliers) */
.eco{display:inline-block;font:800 12px Manrope,sans-serif;color:#04150E;background:var(--emeraude-v);border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:2px}
body.gros .eco{background:#E8EAEE;color:#111}
.eco-liste{margin-top:14px;border-top:1.5px solid var(--encre)}
.eco-l{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;width:100%;padding:11px 0;border-bottom:1.5px dashed #c9c5ba;text-align:left;color:var(--encre)}
.eco-l small{display:block;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6d73}
.eco-l b{font-size:13px;line-height:1.2}
.eco-px{display:flex;flex-direction:column;align-items:flex-end}
.eco-px s{font:600 11px 'JetBrains Mono',monospace;color:#8a8780}
.eco-px b{font:900 16px Archivo,sans-serif}
.eco-l .eco{background:var(--encre);color:#fff;margin:0}
.eco-v{color:var(--emeraude-v)!important}
body.gros .eco-v{color:#E8EAEE!important}
.p-px .eco{font-size:13px}