/* ============================================================ Konbit Market — styles communs aux ecrans d'equipe (vendeur, agent, administration) Un seul fichier pour les trois : ils partagent la meme grammaire visuelle, et une correction faite ici vaut pour tous. Layout : outil de terrain. Quelqu'un debout, un telephone dans une main. Cibles tactiles larges, une colonne, l'action la plus frequente en haut. ============================================================ */ :root{ --bg:#F6F5F2; --surface:#FFFFFF; --ink:#14161C; --ink-soft:#5B6070; --line:#E3E2DC; --brand:#1B2FA0; --brand-ink:#FFFFFF; --brand-soft:#E8EAFA; --hot:#C8102E; --ok:#1A7F4B; --warn:#8A5A00; --warn-soft:#FBF0DC; --display:'Archivo Black','Arial Black',Impact,sans-serif; --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; color-scheme:light; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0E1016; --surface:#171A22; --ink:#F2F2F0; --ink-soft:#9AA0B0; --line:#272B36; --brand:#7C8CF8; --brand-ink:#0E1016; --brand-soft:#1C2140; --hot:#FF6B7A; --ok:#46C084; --warn:#E0A94A; --warn-soft:#2A2113; color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#0E1016; --surface:#171A22; --ink:#F2F2F0; --ink-soft:#9AA0B0; --line:#272B36; --brand:#7C8CF8; --brand-ink:#0E1016; --brand-soft:#1C2140; --hot:#FF6B7A; --ok:#46C084; --warn:#E0A94A; --warn-soft:#2A2113; color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5} img{max-width:100%} [hidden]{display:none!important} .wrap{max-width:720px;margin-inline:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))} h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em} button{font:inherit;color:inherit;cursor:pointer} input,select,textarea{font:inherit;color:inherit} .num{font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)} body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)} .hbar{display:flex;align-items:center;gap:10px;padding-block:11px} .mark{font-family:var(--display);font-size:17px;letter-spacing:-.03em} .tag{font-size:10px;font-weight:700;letter-spacing:.09em;padding:3px 7px;border-radius:4px;background:var(--ink);color:var(--bg)} .spacer{flex:1} .lien{background:none;border:0;padding:6px 0;font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:underline} .onglets{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none} .onglets::-webkit-scrollbar{display:none} .ong{white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink-soft)} .ong[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} /* Le nombre de commandes à préparer doit se voir depuis un AUTRE onglet : sans ça le vendeur ne sait qu'il a du travail qu'en allant le chercher. */ .pastilleOng{display:inline-grid;place-items:center;margin-left:7px;min-width:18px;height:18px; padding:0 5px;border-radius:999px;background:var(--hot);color:#fff;font-size:10.5px;font-weight:700; vertical-align:1px} .ong[aria-selected="true"] .pastilleOng{background:var(--brand-ink);color:var(--brand)} /* Un titre qui ouvre une fiche. Il doit ressembler à un titre, pas à un bouton, mais se voir comme cliquable : sans ça personne ne devine qu'une boutique s'ouvre. */ .titrelien{background:none;border:0;padding:0;text-align:left;font:inherit; font-family:var(--display);font-size:17px;letter-spacing:-.02em;color:var(--brand); cursor:pointer} .titrelien:hover{text-decoration:underline} /* « Appeler le client » est un lien tel: déguisé en bouton : sans ça il arrive souligné au milieu des vrais boutons. */ a.cta{text-decoration:none;display:block;text-align:center;box-sizing:border-box} /* Recherche et catégories au-dessus d'une liste longue. À cinquante boutiques, faire défiler pour retrouver un vendeur est une corvée ; à cent c'est une faute. */ .filtres{position:sticky;top:0;z-index:5;background:var(--bg); padding:10px 0 8px;margin-bottom:2px} .recherche{width:100%;box-sizing:border-box;border:1px solid var(--line); background:var(--surface);color:var(--ink);border-radius:10px; padding:11px 13px;font:inherit} .recherche:focus{outline:2px solid var(--brand);outline-offset:1px} .chips{display:flex;gap:7px;overflow-x:auto;padding-top:8px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{white-space:nowrap;border:1px solid var(--line);background:var(--surface); border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600; color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px} .chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand); color:var(--brand-ink)} .chipnum{font-variant-numeric:tabular-nums;opacity:.65;font-size:11.5px} .chip[aria-pressed="true"] .chipnum{opacity:.85} /* Une adresse complète ne tient pas sur une ligne de téléphone : elle doit se couper plutôt que déborder, et rester sélectionnable à la main si la copie automatique échoue. */ .lienbloc{word-break:break-all;background:var(--brand-soft);border-radius:8px; padding:9px 11px;font-size:12.5px;margin:8px 0;user-select:all} .pile{display:flex;flex-direction:column;gap:12px;padding-block:8px 28px} .bloc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:11px;min-width:0} .titreligne{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .titreligne h2{font-size:15px} .sechead{display:flex;align-items:baseline;gap:9px;padding-block:16px 2px} .sechead h2{font-size:16px} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .note{font-size:12.5px;color:var(--ink-soft)} .empty{text-align:center;padding:40px 0;color:var(--ink-soft);font-size:14px} .champ{display:flex;flex-direction:column;gap:5px} .champ label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} .champ input,.champ select,.champ textarea{ border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:12px 13px;width:100%} .champ textarea{min-height:72px;resize:vertical} .duo{display:flex;gap:10px;flex-wrap:wrap} .duo>*{flex:1;min-width:130px} .coche{display:flex;align-items:center;gap:9px;font-size:13.5px} .coche input{width:20px;height:20px;flex:none} .cta{width:100%;background:var(--brand);color:var(--brand-ink);border:0;border-radius:11px;padding:14px;font-size:15px;font-weight:700} .cta[disabled]{opacity:.45} .cta.vert{background:var(--ok);color:#fff} .cta.rouge{background:var(--hot);color:#fff} .ghost{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:12px;font-size:14px;font-weight:600} .mini{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;flex:none} .rangee{display:flex;gap:8px;flex-wrap:wrap} .pill{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;white-space:nowrap;flex:none} .pill.att{background:var(--brand-soft);color:var(--brand)} .pill.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.ko{background:color-mix(in srgb, var(--hot) 14%, transparent);color:var(--hot)} .pill.gris{background:var(--line);color:var(--ink-soft)} .oref{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-soft)} .ligne{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-soft)} .ligne strong{color:var(--ink);font-weight:600} .tel{font-size:15px;font-weight:700;letter-spacing:.02em} .vignettes{display:flex;gap:8px;flex-wrap:wrap} .media{position:relative;width:66px;height:66px;flex:none} .vignette{width:66px;height:66px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:var(--bg);display:block} .media .sup{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%; border:1px solid var(--line);background:var(--surface);color:var(--hot); font-size:14px;font-weight:700;line-height:1;display:grid;place-items:center;padding:0} .media .vid{position:absolute;bottom:3px;left:3px;background:var(--ink);color:var(--bg); font-size:8.5px;font-weight:700;letter-spacing:.06em;padding:2px 4px;border-radius:3px} .progres{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums} /* Lignes de variantes : libellé, prix, stock, suppression. */ .vrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:10px} .vrow .champ{flex:1;min-width:88px} .vrow .champ.lib{flex:2;min-width:110px} .vrow .sup{border:1px solid var(--line);background:var(--surface);color:var(--hot); border-radius:9px;padding:11px 13px;font-size:13px;font-weight:600;flex:none} .edit{background:var(--bg);border:1px solid var(--line);border-radius:11px; padding:12px;display:flex;flex-direction:column;gap:11px} .danger{border-top:1px solid var(--line);padding-top:11px} .retard{background:var(--warn-soft);border-radius:10px;padding:10px 12px;font-size:12.5px} .erreur{background:color-mix(in srgb, var(--hot) 12%, transparent);border-radius:10px;padding:11px 12px;font-size:13px} .succes{background:color-mix(in srgb, var(--ok) 14%, transparent);border-radius:10px;padding:11px 12px;font-size:13px} .codein{text-align:center;font-family:var(--display);font-size:26px;letter-spacing:.2em} /* ---------- Choix de fichier ------------------------------- Le sélecteur natif affiche « Choose File / No file chosen » en anglais, quelle que soit la langue de la page : son texte n'est pas modifiable. On le masque (en le gardant accessible au clavier et aux lecteurs d'écran) et on habille un label à sa place. */ .fichier{display:flex;align-items:center;gap:10px;flex-wrap:wrap; border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 11px} .fichier input[type="file"]{position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .fichier label{background:var(--surface);border:1px solid var(--line);border-radius:8px; padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;flex:none} .fichier input[type="file"]:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px} .fichier .nomFichier{font-size:12.5px;color:var(--ink-soft);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} /* Une pièce déjà reçue : on le montre, au lieu d'un sélecteur vide qui laisse croire que rien n'est arrivé. */ .recue{display:flex;align-items:center;gap:9px;flex-wrap:wrap; background:color-mix(in srgb, var(--ok) 12%, transparent); border-radius:10px;padding:10px 12px;font-size:13px} .recue .coche{color:var(--ok);font-weight:700;flex:none} .recue .rangee{margin-left:auto} .pieces{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* Une déclinaison : son nom, ses valeurs, de quoi en ajouter. */ .decl{border:1px solid var(--line);border-radius:11px;padding:11px; display:flex;flex-direction:column;gap:9px;margin-bottom:9px} .decl .titreligne{justify-content:space-between} .decl .sup{color:var(--hot);background:none;border:0;font-size:17px;padding:0 4px;flex:none} /* Acceptation des conditions a l'inscription. Case large : on coche avec un pouce, debout, dehors. Le texte reste cliquable en entier grace au