/* At-Pac B2B, design system (clair, épuré, professionnel) */ /* ═══════════════════════════════════════════════════════════════════════════ LES DEUX THEMES (2026-08-28) Le theme se choisit dans le profil et le SERVEUR le pose sur : . La page arrive donc deja dans la bonne couleur, sans clignotement blanc. Un theme applique par JavaScript apres coup peint d'abord la page en clair, puis la repeint : c'est le defaut qu'on evite. ⚠️ Ce qui est une SURFACE suit le theme ; le texte pose SUR une couleur (le blanc d'un bouton orange) n'en depend pas et reste ecrit en dur. Une passe globale sur « #fff » inverserait les deux et rendrait les boutons illisibles. ⚠️ Les factures et les commandes (.doc…) gardent l'apparence d'un document dans les deux themes : elles s'impriment. ═════════════════════════════════════════════════════════════════════════ */ :root{ color-scheme: light; /* ═══ CHARTE 2026, reprise du cahier de charges du site vitrine (§6) ═══ Orange #F39A00 = action · charbon #222222 au lieu du noir · blanc chaud #F7F6F2 au lieu du gris clinique. Les gris neutres deviennent des gris CHAUDS : un gris bleute sur un fond creme se voit tout de suite. */ --police-titre:'Montserrat',ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif; --sur-marque:#222222; /* ⚠️ le texte POSE sur l'orange : charbon, pas blanc. Mesure : blanc sur #F39A00 = 2,23:1 ; charbon = 7,15:1. */ --lien:#9a5e00; /* ⚠️ l'orange ECRIT n'est pas l'orange PEINT. #F39A00 en texte sur blanc donne 2,23:1 ; il faut descendre a #9a5e00 pour passer AA PARTOUT : 5,28 sur blanc, 4,89 sur le creme, 4,69 sur la teinte orangee. Deux roles, deux valeurs : c'est la lecon du 2026-08-28 sur l'eclaircissement de la marque en mode sombre. */ --brand:#f39a00; /* orange At-Pac (PAC) */ --brand-dark:#d98700; --brand-soft:#fdf0d9; --accent:#d07f00; /* 🚨 n'existait PAS : 5 regles l'utilisaient sans repli */ --ink:#222222; /* charbon (AT / auto) */ --ink-2:#3f3a34; /* texte secondaire */ --muted:#6e6862; --chip:#222222; /* pastille volontairement foncee, texte blanc dessus */ --line:#e4e0d8; --line-strong:#cec8bd; --bg:#f7f6f2; --bg-soft:#f1efe8; /* survols, entetes de tableau, etiquettes neutres */ --bg-soft-2:#faf9f5; /* remplissage encore plus discret */ --card:#ffffff; --ok:#15803d; --ok-bg:#ecfdf3; --ok-fill:#dcfce7; --ok-line:#bbf7d0; --ok-ink:#166534; --err:#b42318; --err-bg:#fef3f2; --err-line:#fecdca; --warn:#b54708; --warn-bg:#fffbeb; --warn-fill:#fef3c7; --warn-line:#fde68a; --warn-ink:#92400e; --warn-hint:#b45309; --info-ink:#2b5a9b; --info-bg:#eff6ff; --info-line:#93c5fd; --plum-ink:#6b21a8; --plum-bg:#faf5ff; --plum-line:#d8b4fe; --danger-ink:#c1440e; /* le rouge-orange des avis de prix, ecrit en dur dans une vue */ /* 🚨 Trois variables etaient UTILISEES sans jamais etre definies. Leur repli les faisait fonctionner... en GELANT une couleur claire dans les deux themes. Le tableau de vieillissement du releve est reste blanc a cause de `--fond-doux`. Voir GOTCHAS b2b 71. */ --danger:#c0392b; --soft:#f1efe8; --fond-doux:#faf9f5; --ring:rgba(243,154,0,.30); --shadow:0 1px 2px rgba(60,50,35,.07),0 8px 22px -14px rgba(60,50,35,.22); /* ⚠️ Hauteur de la barre d'emprunt d'identité : déclarée ici même si un petit script la corrige à la hauteur réelle. Une variable posée uniquement en JavaScript est une orpheline pour la feuille (GOTCHAS b2b 71). */ --imp-h:46px; } [data-theme="sombre"]{ color-scheme: dark; --sur-marque:#1c1a17; /* l'orange ne change pas d'un theme a l'autre */ --lien:#f5a933; /* sur fond sombre, c'est l'inverse : il faut l'ECLAIRCIR */ /* champs, listes deroulantes et barres de defilement du navigateur */ --brand:#f39a00; /* ⚠️ INCHANGE : l'eclaircir fait TOMBER le contraste du bouton plein (blanc sur orange), mesure 2,66 -> 2,33. C'est --accent qui sert de marque en TEXTE. */ --brand-dark:#c87c00; --brand-soft:#2e2314; --accent:#f5a933; --ink:#f0ede7; --ink-2:#cdc7bd; --muted:#a09890; --chip:#403a33; --line:#332e28; --line-strong:#463f37; --bg:#17150f; --bg-soft:#27231c; --bg-soft-2:#201d17; --card:#1e1b16; --ok:#4ade80; --ok-bg:#122a1e; --ok-fill:#153726; --ok-line:#1f5136; --ok-ink:#86e5ab; --err:#f28b82; --err-bg:#2c1614; --err-line:#552a27; --warn:#f5b544; --warn-bg:#2a2111; --warn-fill:#3a2b14; --warn-line:#5b4419; --warn-ink:#f0c47c; --warn-hint:#e8b165; --info-ink:#8ab4f8; --info-bg:#16202e; --info-line:#2f4763; --plum-ink:#d3b0f5; --plum-bg:#231c31; --plum-line:#4a3663; --danger-ink:#f0a184; --danger:#f28b82; --soft:#27231c; --fond-doux:#201d17; --ring:rgba(243,154,0,.38); --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px -12px rgba(0,0,0,.75); } /* Le logo est une encre foncee sur fond transparent : sur un fond sombre, le « AT » et la mention disparaissent. On lui pose une plaque claire plutot que de le filtrer, ce qui garde l'orange de la marque exact. */ [data-theme="sombre"] .side-logo img, [data-theme="sombre"] .mtop-logo img{ background:#fff;border-radius:7px;padding:5px 9px;box-sizing:content-box} *{box-sizing:border-box} /* 🚨 `height:100%` empêchait le CORPS de grandir avec son contenu : mesuré le 2026-08-29, body faisait 780 px pendant que la page en défilait 1797. Un élément `position:sticky` posé sur le corps s'arrêtait donc au bas de la fenêtre, et la barre d'emprunt d'identité quittait l'écran au défilement. `min-height` garde l'intention (remplir la fenêtre quand le contenu est court) sans plafonner la hauteur. */ html,body{min-height:100%} body{margin:0;background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:var(--lien);text-decoration:none} a:hover{text-decoration:underline} /* ---- boutons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; border:1px solid transparent;border-radius:8px;padding:11px 16px;font-size:15px;font-weight:600; cursor:pointer;transition:filter .15s,background .15s,border-color .15s} .btn-primary{background:var(--brand);color:var(--sur-marque);box-shadow:0 8px 20px -12px var(--ring)} .btn-primary:hover{filter:brightness(1.05);text-decoration:none} .btn-ghost{background:var(--card);border-color:var(--line-strong);color:var(--ink)} .btn-ghost:hover{background:var(--bg-soft-2);text-decoration:none} .btn-block{width:100%} /* ---- champs ---- */ .field{margin-bottom:16px} .field label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px} .input{width:100%;background:var(--card);border:1px solid var(--line-strong);border-radius:8px; padding:11px 13px;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s} .input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)} /* ---- alerts ---- */ .alert{border-radius:8px;padding:11px 13px;font-size:13.5px;margin-bottom:16px;border:1px solid} .alert-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)} .alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)} /* Palier intermediaire : ni vert ni rouge. Sans cette regle la banniere « alerte » sortait avec un fond transparent et la couleur du texte courant : visible dans le HTML, invisible a l ecran. */ .alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)} /* ---- lang toggle ---- */ .lang{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--card)} .lang a{padding:5px 11px;font-size:12.5px;color:var(--muted);text-decoration:none} .lang a.active{background:var(--chip);color:#fff} /* ================= AUTH (login) ================= */ .auth-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px} .auth-top{position:fixed;top:18px;right:20px} .auth-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line); border-radius:16px;box-shadow:var(--shadow);padding:34px 32px 28px} .auth-logo{display:block;height:42px;margin:0 auto 6px} .auth-tag{text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:0;margin-bottom:24px; text-transform:none} .auth-card h1{font-size:19px;text-align:center;margin:0 0 22px} .auth-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:2px 0 18px} .check{display:inline-flex;align-items:center;gap:7px;color:var(--muted);cursor:pointer} .check input{accent-color:var(--brand);width:15px;height:15px} .auth-foot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--muted)} /* ================= APP (pages connectées) ================= */ .topbar{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .topbar-inner{max-width:1120px;margin:0 auto;height:60px;display:flex;align-items:center; justify-content:space-between;padding:0 22px} .topbar-logo{height:32px;display:block} .topbar-right{display:flex;align-items:center;gap:14px} .user-chip{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25} .user-chip b{font-size:13.5px} .user-chip span{font-size:12px;color:var(--muted)} .container{max-width:1120px;margin:0 auto;padding:26px 22px} .card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:22px 24px} .card h2{margin:0 0 4px;font-size:18px} .page-title{font-size:22px;margin:0 0 18px;font-weight:700} .kv{font-size:14px} .kv .k{color:var(--muted);font-size:12px;text-transform:none;letter-spacing:0} .badge{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px; background:var(--brand-soft);color:var(--lien)} .badge-muted{background:var(--bg-soft);color:var(--ink-2)} /* ===== Admin / rôles / mobile (v3) ===== */ .imp-bar{background:var(--brand-soft);border-bottom:1px solid var(--warn-line);color:var(--warn-ink);display:flex; align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;font-size:13.5px} .imp-back{border:1px solid #d98a2b;background:var(--card);color:var(--warn-ink);border-radius:8px;padding:5px 12px;font-weight:600;cursor:pointer} .navlink{color:var(--ink);font-weight:600;font-size:14px;padding:6px 10px;border-radius:8px;text-decoration:none;display:inline-block} .navlink:hover{background:var(--bg-soft);text-decoration:none} .tbl{width:100%;border-collapse:collapse;font-size:14px} .tbl th{text-align:left;font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--muted); padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg-soft-2);white-space:nowrap} .tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tbody tr:hover td{background:var(--bg-soft-2)} .pill{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:5px 13px; font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-2)} .pill-on{background:var(--brand-soft);border-color:var(--warn-line);color:var(--lien)} .toggle{width:40px;height:23px;border-radius:999px;border:0;background:var(--line-strong);position:relative; cursor:pointer;padding:0;transition:background .15s;vertical-align:middle} .toggle span{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s} .toggle.on{background:var(--brand)} .toggle.on span{left:19px} /* pagination Laravel */ nav[role=navigation] .flex{display:flex;gap:6px;flex-wrap:wrap;align-items:center} nav[role=navigation] a, nav[role=navigation] span{padding:6px 11px;border:1px solid var(--line);border-radius:8px; font-size:13px;color:var(--ink);text-decoration:none} nav[role=navigation] a:hover{background:var(--bg-soft)} /* ===== responsive mobile ===== */ @media(max-width:720px){ .container{padding:18px 14px} .topbar-inner{padding:0 14px;height:56px} .topbar-logo{height:28px} .user-chip{display:none} .page-title{font-size:19px} .tbl:not(.cart-tbl) th:nth-child(2), .tbl:not(.cart-tbl) td:nth-child(2){display:none} /* cache colonne secondaire sur petit écran, mais JAMAIS dans le panier : sa 2e colonne est la QUANTITÉ, et dans le pied de tableau c'est le MONTANT. Les deux disparaissaient sur mobile (mesuré 2026-08-21). */ } .linkbtn{border:0;background:none;color:var(--lien);font-size:12px;cursor:pointer;padding:2px 4px;text-decoration:underline} .linkbtn:hover{color:var(--brand)} /* ===== responsive mobile (v4) ===== */ @media (max-width: 720px) { .topbar-inner { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 8px; } .topbar-right { gap: 10px; flex-wrap: wrap; } .navlink { font-size: 13px; padding: 6px 8px; } .page-title { font-size: 19px; } .card { padding: 18px 16px; } .auth-card { padding: 26px 20px; } .tbl { font-size: 13px; } .tbl th, .tbl td { padding: 10px 10px; } } @media (max-width: 480px) { .container { padding: 16px 12px; } .user-chip { display: none; } .btn { padding: 10px 12px; } .lang a { padding: 6px 9px; } } /* ===== fix mise en page (v5) : barre pleine largeur, logo vraiment à gauche ===== */ .topbar-inner { max-width: none; width: auto; margin: 0; padding: 0 32px; } .container { max-width: 1200px; padding-left: 32px; padding-right: 32px; } /* Bannière d'installation PWA (mobile, bas de l'écran) */ .pwa-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; max-width: 440px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px -10px rgba(16,24,40,.35); padding: 13px 14px; display: flex; align-items: center; gap: 12px; } .pwa-banner-icon { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); flex: 0 0 auto; } .pwa-banner-body { flex: 1; min-width: 0; } .pwa-banner-title { font-weight: 700; font-size: 14px; } .pwa-banner-text { font-size: 12.5px; color: var(--muted); line-height: 1.35; } .pwa-banner-btn { padding: 9px 14px; flex: 0 0 auto; } .pwa-banner-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; flex: 0 0 auto; align-self: flex-start; } /* ===== pagination maison (v6) ===== */ .pager { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .pager-btn { min-width: 36px; text-align: center; padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1; } .pager-btn:hover { background: var(--bg-soft); text-decoration: none; } .pager-btn.is-current { background: var(--brand); border-color: var(--brand); color:var(--sur-marque); } .pager-btn.is-disabled { color: var(--line-strong); } .pager-dots { padding: 0 4px; color: var(--muted); } .pager-info { margin-top: 10px; font-size: 12.5px; color: var(--muted); } /* filet de sécurité : jamais d'icône de pagination géante */ .pager svg, nav[role="navigation"] svg { width: 18px; height: 18px; } /* ===== autocomplete recherche client (v7) ===== */ .ac-results { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; z-index: 30; } .ac-item { padding: 10px 13px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--line); } .ac-item:last-child { border-bottom: 0; } .ac-item:hover { background: var(--brand-soft); } .ac-item span { color: var(--muted); font-size: 12px; } .ac-chosen { margin-top: 8px; background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; } /* ===== menu latéral + dashboard (v8) ===== */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex: 0 0 240px; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .side-logo { padding: 18px 20px; border-bottom: 1px solid var(--line); display: block; } .side-logo img { height: 30px; } .side-nav { padding: 12px 10px; flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .side-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; } .side-link svg { width: 20px; height: 20px; flex: 0 0 20px; } .side-link:hover { background: var(--bg-soft); text-decoration: none; } .side-link.on { background: var(--brand-soft); color:var(--lien); } .side-foot { border-top: 1px solid var(--line); padding: 14px 16px; } .side-user { margin-bottom: 10px; line-height: 1.3; } .side-user b { font-size: 13.5px; display: block; } .side-user span { font-size: 12px; color: var(--muted); } .side-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mtop { display: none; } .content { max-width: 1120px; width: 100%; margin: 0 auto; padding: 28px; } .side-overlay { display: none; } /* stats */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow); } .stat-k { font-size: 11.5px; text-transform:none; letter-spacing:0; color: var(--muted); } .stat-v { font-size: 25px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; } .stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .dash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } @media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .dash-cols { grid-template-columns: 1fr; } } @media (max-width: 820px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 50px rgba(0,0,0,.25); } .sidebar.open { transform: none; } .sidebar.open ~ .side-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55; } .mtop { display: flex; align-items: center; gap: 12px; background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 14px; position: sticky; top: 0; z-index: 40; } .mtop-logo img { height: 26px; } .burger { border: 0; background: none; cursor: pointer; padding: 4px; color: var(--ink); } .burger svg { width: 26px; height: 26px; } .content { padding: 18px 14px; } } /* ---- onglets (dashboard) ---- */ .tabs{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--line)} .tab{border:0;background:transparent;padding:10px 14px;font:inherit;font-weight:600;color:var(--muted); cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0} .tab:hover{color:var(--ink)} .tab.on{color:var(--lien);border-bottom-color:var(--brand)} .tab-badge{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;font-size:11px;line-height:18px; text-align:center;background:var(--brand);color:var(--sur-marque);border-radius:8px;vertical-align:middle} .tab-panel[hidden]{display:none} /* ---- lignes de tableau cliquables ---- */ .row-link{cursor:pointer} .row-link:hover{background:var(--brand-soft)} .row-link a{color:inherit} /* ---- LIEN VERS UN DOCUMENT, le standard de l'application ---- Un numero de facture, de paiement, de commande ou de bon de livraison qui OUVRE le document porte cette classe, partout, sans exception. ⚠️ Elle existe a cause de `.row-link a{color:inherit}` juste au-dessus : dans une ligne cliquable, un lien heritait du NOIR et ne ressemblait plus a un lien. Les ecrans Transactions et Tableau de bord affichaient donc leurs numeros de document en noir, alors que les memes numeros etaient orange ailleurs. Signale par Max le 2026-08-27. ⚠️ Le selecteur double (`a.lien-doc`) est deliberé : il faut battre la specificite de `.row-link a`. Une simple `.lien-doc` perdrait, en silence. */ a.lien-doc{color:var(--lien);font-weight:700;text-decoration:none} /* ---- VUE « DETAIL » d'un document ---- La troisieme facon de lire une piece : les lignes en tableau, chaque article cliquable vers le catalogue. Defaut de tous les comptes depuis le 2026-08-27. ⚠️ Sur telephone, le tableau se replie en fiches grace aux `data-l` poses sur chaque cellule, meme mecanique que `.doc-lignes`, pour que les deux vues se comportent pareil au lieu de diverger a la premiere fenetre etroite. */ .det-entete{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 16px;padding:0 0 14px; border-bottom:1px solid var(--line)} .det-entete>div{display:flex;flex-direction:column;gap:2px} .det-entete dt{font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--muted)} .det-entete dd{margin:0;font-weight:600} .det-lignes{width:100%;border-collapse:collapse} .det-lignes th{text-align:left;font-size:11.5px;text-transform:none;letter-spacing:0; color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap} .det-lignes td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} .det-lignes tr:last-child td{border-bottom:0} .det-lignes .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .det-lignes .desc{color:var(--ink)} .det-lignes .vide{color:var(--muted);text-align:center;padding:22px} .det-totaux{margin:16px 0 0;margin-left:auto;max-width:340px} .det-totaux>div{display:flex;justify-content:space-between;gap:16px;padding:5px 0} .det-totaux dt{color:var(--muted)} .det-totaux dd{margin:0;font-variant-numeric:tabular-nums} .det-totaux .total{border-top:2px solid var(--line);margin-top:6px;padding-top:9px;font-weight:700} .det-totaux .total dt{color:var(--ink)} @media (max-width:640px){ /* Le tableau devient une pile de fiches : un tableau a 5 colonnes sur un telephone force un defilement horizontal que personne ne trouve. */ .det-lignes thead{display:none} .det-lignes,.det-lignes tbody,.det-lignes tr,.det-lignes td{display:block;width:100%} .det-lignes tr{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;padding:6px 4px} .det-lignes td{border:0;display:flex;justify-content:space-between;gap:14px;padding:5px 10px} .det-lignes td::before{content:attr(data-l);color:var(--muted);font-size:12px;flex:0 0 auto} .det-lignes .n{text-align:right} .det-totaux{max-width:none} } a.lien-doc:hover{color:var(--brand);text-decoration:underline} .row-link a.lien-doc{color:var(--lien)} .row-link:hover a.lien-doc{color:var(--lien);text-decoration:underline} /* ---- modale ---- */ .modal-overlay{position:fixed;inset:0;background:rgba(16,24,40,.5);display:none; align-items:flex-start;justify-content:center;z-index:1000;padding:10vh 16px 16px} .modal-overlay.open{display:flex} .modal{background:var(--card);border-radius:10px;box-shadow:var(--shadow);width:100%;max-width:460px; padding:22px 22px 20px;animation:modalIn .14s ease-out} @keyframes modalIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .modal-x{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px} .modal-x:hover{color:var(--ink)} /* ---- popover "définir mot de passe" (équipe) ---- */ .pwset{position:relative;display:inline-block} .pwset>summary{list-style:none;cursor:pointer} .pwset>summary::-webkit-details-marker{display:none} .pwset-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;display:flex;gap:8px;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:12px;width:280px} .pwset-pop .input{padding:8px 10px} /* ---- élargir la zone de contenu (presque pleine largeur, marge minime) ---- */ .content{max-width:1500px} /* tableaux admin : actions compactes pour éviter le débordement horizontal */ .tbl .btn{white-space:nowrap} /* ---- expéditions rattachées à une facture (livraisons partielles) ---- */ .ships{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px} .ships-label{font-size:11.5px;color:var(--muted)} .ship-chip{display:inline-block;padding:2px 8px;font-size:11.5px;font-weight:600;line-height:1.5; color:var(--lien);background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;text-decoration:none} .ship-chip:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--lien);text-decoration:none} /* ---- annonces du tableau de bord ---- */ .news{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--card); border-radius:9px;padding:14px 16px;margin:0 0 12px;box-shadow:var(--shadow)} .news-title{font-weight:700;margin-bottom:3px} .news-body{color:var(--ink-2);font-size:14px;line-height:1.55} .news-info{border-left-color:var(--brand)} .news-warning{border-left-color:#d97706;background:var(--warn-bg)} .news-success{border-left-color:var(--ok);background:var(--ok-bg)} /* ---- graphique achats 12 mois ---- */ .chart{display:flex;align-items:flex-end;gap:6px;height:190px;margin:18px 0 6px} .chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;cursor:default} .chart-bars{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px} .chart-bar{width:58%;background:linear-gradient(180deg,var(--brand),var(--brand-dark));border-radius:5px 5px 0 0; transition:filter .15s;min-height:2px} .chart-prev{width:26%;background:var(--line);border-radius:4px 4px 0 0;min-height:1px} .chart-col:hover .chart-bar{filter:brightness(1.12)} .chart-x{font-size:10.5px;color:var(--muted);margin-top:7px;letter-spacing:.02em} .chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted); border-top:1px solid var(--line);padding-top:12px;margin-top:6px} .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle} .sw-bar{background:var(--brand)} .sw-prev{background:var(--line)} .trend{font-size:13px;font-weight:600;white-space:nowrap} .trend span{font-weight:400;color:var(--muted)} .trend-up{color:var(--ok)} .trend-down{color:var(--warn-hint)} /* ---- vieillissement du solde ---- */ .ag-bar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:var(--bg-soft);margin:16px 0 14px} .ag-bar div{transition:opacity .15s} .ag-bar div:hover{opacity:.85} .ag-ok{background:var(--ok)} .ag-w1{background:#f59e0b} .ag-w2{background:#f97316} .ag-bad{background:var(--err)} i.ag-ok,i.ag-w1,i.ag-w2,i.ag-bad{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle} .ag-tbl{width:100%;border-collapse:collapse;font-size:14px} .ag-tbl td{padding:7px 0;border-bottom:1px solid var(--line)} .ag-tbl tr:last-child td{border-bottom:0} .ag-total td{font-weight:700;padding-top:11px} .ag-note{margin-top:10px;font-size:12.5px;color:var(--err);background:var(--err-bg); border:1px solid var(--err-line);border-radius:7px;padding:9px 11px} /* ---- état d'expédition d'une commande ---- */ .ship-state{display:inline-block;padding:1px 8px;font-size:11px;font-weight:600;border-radius:12px;margin-left:6px} .ship-pending{background:var(--bg-soft);color:var(--muted)} .ship-partial{background:var(--warn-fill);color:var(--warn-ink)} .ship-shipped{background:var(--ok-bg);color:var(--ok)} /* ---- recherche de pièces ---- */ .ai-card{border:1px solid var(--brand);background:linear-gradient(180deg,var(--brand-soft),var(--card))} .ai-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ai-badge{display:inline-block;background:var(--brand);color:var(--sur-marque);font-size:11px;font-weight:800; letter-spacing:.06em;padding:3px 9px;border-radius:12px} .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px} .tr-periode{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px} .tr-periode .field{min-width:170px} .tr-raccourcis{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:9px} .tr-raccourcis-t{color:var(--muted);font-size:13px} .adv-toggle{margin-top:14px;background:none;border:0;color:var(--lien);font:inherit;font-size:13.5px; font-weight:600;cursor:pointer;padding:0} .adv-toggle:hover{text-decoration:underline} /* Recherche par LISTE de numeros, sous-depliant DANS les options supplementaires. ⚠️ Premiere version : un simple filet au-dessus, et un sommaire de la meme taille, de la meme graisse et du meme orange que « Options supplementaires ». Les deux se lisaient comme des FRERES alors que l un est dans l autre, et les boutons de la liste flottaient jusqu a ceux du formulaire : deux « Effacer » identiques a 60 px l un de l autre. La hierarchie doit se voir, pas se deviner. ⇒ panneau encadre : il contient visiblement ce qui lui appartient. */ .lot-zone{margin-top:18px;padding:10px 14px 4px;background:var(--bg); border:1px solid var(--line);border-radius:8px} .lot-zone[open]{padding-bottom:14px} /* Le sommaire est volontairement PLUS DISCRET que .adv-toggle : plus petit, en gris, seul le chevron reste orange. C est un cran plus bas dans l arbre. */ .lot-sum{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted); list-style:none;display:inline-flex;align-items:center;gap:7px;padding:3px 0} .lot-sum::-webkit-details-marker{display:none} .lot-sum::before{content:"\25B6";font-size:9px;color:var(--brand)} .lot-zone[open] .lot-sum{color:var(--ink)} .lot-zone[open] .lot-sum::before{content:"\25BC"} .lot-sum:hover{color:var(--ink)} /* Véhicule décodé d'un NIV, et les questions de précision. ⚠️ La question de précision n'est PAS une erreur : fond neutre et bordure discrète, jamais le rouge d'une panne. Le client n'a rien fait de mal : il lui manque un mot. */ .ai-vin{margin-top:10px;padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:7px} .ai-vin-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px} .ai-vin-tag{background:var(--chip);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em; padding:2px 7px;border-radius:12px} .ai-vin-num{color:var(--muted);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .ai-vin-note{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.35} .clarify{background:var(--brand-soft);border:1px solid var(--brand);border-radius:8px; padding:16px 18px;margin-top:18px} .clarify-q{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4} .clarify-cpt{margin-top:7px;color:var(--muted);font-size:13px} /* Le bouton du panneau est primaire, c est l action de CE panneau, mais compact, pour qu il ne dispute pas « Rechercher » a taille egale. */ .lot-go{padding:7px 14px;font-size:13.5px} /* « Effacer » de la liste redevient un lien : deux boutons « Effacer » empiles dans la meme carte, c etait a l utilisateur de deviner lequel efface quoi. */ .lot-vider{background:none;border:0;padding:0;font:inherit;font-size:12.5px; color:var(--muted);cursor:pointer;text-decoration:underline} .lot-vider:hover{color:var(--ink)} .results-info{margin:18px 0 10px;color:var(--muted);font-size:13.5px} .ai-note{background:var(--brand-soft);border:1px solid var(--brand);border-radius:8px; padding:9px 12px;margin-bottom:10px;color:var(--ink);font-size:13.5px} .results{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .item-card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:14px 16px; box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px} .item-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .item-id{font-weight:700;font-size:15px} .item-price{font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap} .item-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px} .tag{font-size:11px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:1px 8px;color:var(--muted)} .pill-stock{font-size:11.5px;font-weight:600;border-radius:12px;padding:2px 9px;white-space:nowrap;display:inline-block;margin-top:4px} .pill-stock.ok{background:var(--ok-bg);color:var(--ok)} .pill-stock.no{background:var(--bg-soft);color:var(--muted)} /* ⚠️ Stock INCONNU : ni vert ni gris de rupture. Le pointille dit « ce chiffre manque », la ou une pastille pleine dirait « voici le chiffre ». Mesure du 2026-09-09 : sans cette pastille, une panne de stock etait MUETTE a l'ecran, donc indiscernable d'un affichage normal. */ .pill-stock.unk{background:transparent;color:var(--muted);border:1px dashed var(--line);cursor:help} .item-desc{font-size:13.5px;color:var(--ink-2);line-height:1.45} .item-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)} .item-meta b{color:var(--ink-2);font-weight:600} .item-fits{border-top:1px solid var(--line);padding-top:8px} .fits-label{font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0} .item-fits ul{margin:4px 0 0;padding-left:16px;font-size:12.5px;color:var(--ink-2)} .item-fits li.more{color:var(--muted);list-style:none;margin-left:-16px} .item-actions{border-top:1px solid var(--line);padding-top:10px} .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px} /* ---- prix multiples sur la carte produit ---- */ .item-price-label{font-size:10.5px;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:-2px} .item-price-alt{display:flex;flex-direction:column;gap:1px;margin-top:6px;font-size:11.5px;color:var(--muted)} .item-price-alt b{color:var(--ink-2);font-weight:600} /* ---- quantités du panier ---- */ .qty-box{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:7px;overflow:hidden} .qty-btn{border:0;background:var(--bg-soft-2);width:32px;height:34px;font-size:17px;line-height:1;cursor:pointer;color:var(--ink)} .qty-btn:hover{background:var(--brand-soft);color:var(--lien)} .qty-input{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line); width:52px;height:34px;text-align:center;font:inherit;font-size:14px;outline:none} /* ⚠️ `outline:none` ci-dessus enleve l anneau du navigateur pour que le champ reste colle a ses deux boutons -/+ : sans remplacement, le champ de quantite — le plus utilise du portail, page Pieces ET panier — n indique PLUS rien au clavier. On remet l anneau EN DEDANS (inset), la ou un outline deborderait sur les boutons voisins. Mesure du 2026-09-14 : c etait la seule des deux regles `outline:none` sans contrepartie ; `.input` avait deja la sienne. */ .qty-input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand); border-radius:3px;position:relative;z-index:1} .qty-note{font-size:11px;color:var(--muted);margin-top:3px;min-height:14px} .qty-note.capped{color:var(--warn-hint);font-weight:600} .cart-tbl td{vertical-align:middle} /* ---- avertissement de doublon de courriel ---- */ .warn-note{margin-top:7px;font-size:12px;line-height:1.5;color:var(--warn-ink);background:var(--warn-bg); border:1px solid var(--warn-line);border-radius:7px;padding:8px 10px} /* ---- indicateur de chargement ---- */ .load-overlay{position:fixed;inset:0;background:rgba(255,255,255,.72);backdrop-filter:blur(2px); display:none;align-items:center;justify-content:center;z-index:2000} .load-overlay.on{display:flex} .load-card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow); padding:22px 28px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:210px} .load-text{font-size:14px;color:var(--ink);font-weight:500} .spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--line); border-top-color:var(--brand);animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* BOUTON EN COURS D'ACTION. 🚨 Le spinner était une couleur FIXE (blanc, puis des exceptions par variante). Mesuré le 2026-08-29, thème par thème, sur le fond réel de chaque bouton : orange sur ghost blanc ........ 2,23:1 blanc sur `.btn` nu clair (#efefef) 1,15:1 blanc sur l'orange de marque .. 2,23:1 #b42318 sur danger-soft sombre 2,59:1 Quatre invisibles sur huit, et le défaut ne se signale pas : un bouton qui travaille sans qu'on le voie a exactement l'air d'un bouton mort. ⇒ Le spinner prend la couleur du LIBELLE de son bouton (`--spin`), qui est déjà validée pour ce fond, dans les deux thèmes. `currentColor` ne peut pas servir : `.btn.is-loading` met `color:transparent` pour effacer le libellé, le spinner s'effacerait avec lui — d'où la variable jumelle. Le tour du cercle est TRANSPARENT plutôt qu'un gris choisi : une piste dont la couleur est fixe redevient le même problème sur le fond suivant. */ .btn{--spin:var(--ink)} .btn-primary{--spin:var(--sur-marque)} .btn-ghost{--spin:var(--ink)} .btn-danger-soft{--spin:var(--err)} .btn.is-loading{position:relative;color:transparent !important;pointer-events:none} .btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px; border-radius:50%;border:2px solid transparent;border-top-color:var(--spin,var(--ink)); animation:spin .7s linear infinite} @media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}} .send-hint{font-size:12px;color:var(--muted);margin-right:auto} /* ---- adresses (Mon compte) ---- */ .addr-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start; border-top:1px solid var(--line);padding:13px 0} .addr-row.is-locked{opacity:.72} /* ─── L'etat du compte, en une ligne (« Mon accueil », 2026-09-14) ──────────── Remplace la tuile « Solde du compte », et elle NE S'AFFICHE QU'EN CAS DE RETARD (Max, 2026-09-14 : « pas besoin de ca tout court si le solde est OK »). Une ligne qui annonce « tout va bien » tous les jours n'est pas une information, c'est du decor qu'on cesse de lire, et le jour ou elle dit autre chose, personne ne la regarde plus. */ .etat-compte{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; border:1px solid var(--line);border-left-width:4px;border-radius:8px; padding:11px 14px;margin-bottom:18px;font-size:13.5px;background:var(--card)} .etat-compte b{font-size:15px;font-weight:700} .etat-compte span{color:var(--muted)} /* ⚠️ `est-ok` RETIRE le 2026-09-14 : la ligne ne s'affiche plus du tout quand le compte est a jour, donc plus personne n'emet cette classe. Une regle morte fait croire a un etat qui n'existe pas. */ .etat-compte.est-warn{border-left-color:var(--warn)} .etat-compte.est-warn b{color:var(--warn)} .etat-compte.est-bad{border-left-color:var(--err)} .etat-compte.est-bad b{color:var(--err)} /* L'echeance d'un estime. C'est la SEULE chose de cet ecran qui a une date limite, et elle n'etait ecrite nulle part : le client l'apprenait en cliquant. */ .sv-exp{font-size:11.5px;color:var(--muted);white-space:nowrap} .sv-exp-urgent{color:var(--warn);font-weight:600} /* Le compte d'estimes, dans le titre de la carte. Il porte ce que la liste montre VRAIMENT : la tuile d'avant comptait tous les estimes du client et disait 2 quand la liste en affichait 1. */ .sv-compte{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:12px; background:var(--bg-soft);color:var(--ink-2);font-size:12.5px;font-weight:600; vertical-align:middle} /* Un chiffre qu'on n'a pas pu lire. Meme langage que `pill-stock.unk` pose le 2026-09-09 sur le stock : le pointille dit « ce chiffre manque », la ou un chiffre plein dirait « voici le chiffre ». Jamais un zero. */ .stat-v.nd{color:var(--muted);font-size:15px;font-weight:600;border-bottom:1px dashed var(--line); display:inline-block;cursor:help} /* La liste d'adresses prend la largeur qu'on lui donne : deux par rangee dans une carte large, une seule dans une carte etroite. Sans elle, la carte passee dans la colonne large le 2026-09-14 offrait 800 px a un contenu de 250, avec « Edit » et « Remove » rejetes a 500 px du texte qu'ils concernent. ⚠️ `auto-fill`, pas `auto-fit` : `auto-fit` etire une adresse seule sur toute la largeur, et 92,5 % des clients n'en ont qu'une (mesure du 2026-09-13). */ /* ⚠️ `min(320px,100%)` et pas `320px` tout court : sur telephone la carte n'offre que 299 px de contenu, et un minimum de 320 l'emporterait sur le conteneur. La piste depassait de 21 px, mesure a 375. */ .addr-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:0 28px} .addr-lines{display:flex;flex-direction:column;font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.5} /* ===== résultats de recherche : lignes (remplace la grille compacte) ===== */ .results{display:block} .item-row{display:grid;grid-template-columns:132px 1fr 260px;gap:18px;align-items:start; background:var(--card);border:1px solid var(--line);border-radius:9px;padding:14px 16px; margin-bottom:10px;box-shadow:var(--shadow);transition:border-color .15s} .item-row:hover{border-color:var(--line-strong)} .row-photo{width:132px;height:100px;object-fit:contain;background:var(--card);border:1px solid var(--line); border-radius:7px;padding:4px} .row-photo.no-photo{background:repeating-linear-gradient(45deg,var(--bg-soft-2),var(--bg-soft-2) 8px,var(--bg-soft) 8px,var(--bg-soft) 16px)} .row-main{min-width:0} .row-id{font-size:16px;font-weight:700;letter-spacing:.01em} .row-badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 7px} .at-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:12px;border:1px solid} .at-cls {background:var(--bg-soft-2);color:var(--ink-2);border-color:var(--line)} .at-side{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)} .at-pos {background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)} .at-fin {background:var(--plum-bg);color:var(--plum-ink);border-color:var(--plum-line)} .at-mat {background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)} .row-desc{font-size:13.5px;color:var(--ink-2);line-height:1.5} .row-nums{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--ink-2)} .row-nums i{color:var(--muted);font-style:normal;font-weight:600;margin-right:3px} .row-fits{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.5} .row-fits i{font-style:normal;text-transform:none;font-size:10.5px;letter-spacing:0;margin-right:4px} .fits-more{border:0;background:var(--bg-soft);color:var(--lien);font:inherit;font-size:11px;font-weight:600; border-radius:12px;padding:1px 8px;cursor:pointer} .fits-more:hover{background:var(--brand-soft)} .row-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px} .row-price{font-size:21px;font-weight:700;line-height:1.1} .row-price-none{font-size:15px;color:var(--muted)} .row-price-label{font-size:10px;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:-3px} .row-price-alt{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--muted);margin-top:3px} .row-price-alt b{color:var(--ink-2);font-weight:600} .row-price-client{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:nowrap} .row-price-client b{color:var(--ink);font-weight:700;font-size:14px} .row-price-lib{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0;margin-right:2px} /* ---- « Infos employés » : ce que le CLIENT ne voit pas, dans sa propre boîte. Max, 2026-09-07. Le commis doit pouvoir lire la carte et savoir, sans réfléchir, ce qui est sous les yeux du client. Le cadre pointillé dit « ceci n'est pas la carte du client » sans avoir à l'écrire. ---- */ /* ⚠️ `inline-block` la collait A COTE du bouton « Applications », qui est lui-meme en ligne — mesure a l'ecran le 2026-09-07. `block` lui donne sa ligne, `width:fit-content` l'empeche de barrer toute la carte. */ .row-emp{display:block;grid-column:1/-1;width:fit-content;max-width:100%;margin-top:0;padding:5px 10px;border:1px dashed var(--line);border-radius:8px;background:var(--bg-soft)} .row-emp-t{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .row-emp-c{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;font-size:11.5px;color:var(--muted)} .row-emp-c b{color:var(--ink-2);font-weight:600} /* Les lignes STOCK et EN COMMANDE de la boite employes (2026-09-07). Le libelle est en petites capitales a gauche : sans lui, trois noms de succursale suivis de trois nombres ne disaient pas ce qu'ils comptaient. */ .row-emp-l{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px;font-size:11px} .row-emp-l>i{font-style:normal;font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:4px} .row-emp-l>span{padding:1px 7px;border-radius:12px;white-space:nowrap} .row-emp-l em{font-style:normal;opacity:.8} .row-emp-l .inv-cmd{background:var(--warn-bg,var(--bg-soft));color:var(--warn,var(--ink-2))} .qty-fixe{font-weight:700;font-size:15px} .ligne-commis{margin-top:4px;font-size:11.5px;color:var(--brand);font-weight:600} .row-emp-l .inv-inactif{background:#991b1b;color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10px;padding:2px 8px} .row-add{display:flex;align-items:center;gap:8px;margin-top:6px} .row-add .btn{padding:8px 14px;font-size:13.5px;white-space:nowrap} .row-add .qty-box{flex-shrink:0} .row-add .qty-input{width:44px} .row-add .qty-btn{width:28px;height:32px;font-size:15px} /* Le message « Quantite ajustee... » sous le bouton d'ajout (2026-09-07). ⚠️ `width:100%` avec `flex-wrap` sur le parent : sans les deux, le message se met A COTE du bouton au lieu de dessous, et la carte s'elargit. */ .row-add{flex-wrap:wrap} .row-add-msg{width:100%;margin-top:4px;font-size:11.5px;line-height:1.3;color:var(--warn,var(--muted))} @media (max-width: 900px){ .item-row{grid-template-columns:96px 1fr;gap:12px} .row-photo{width:96px;height:76px} /* 🚨 `space-between` distribuait l'espace SELON LE NOMBRE d'éléments : une carte avec prix, étiquette, Ontario, stock et provenance était serrée, et la même carte sans stock ni provenance voyait « DÉTAIL » flotter seul au milieu, à plusieurs centimètres du prix. Capture de Max, 2026-08-28. ⇒ Les éléments restent COLLÉS et passent à la ligne quand il le faut. Une mise en page ne doit pas dépendre du nombre de choses qu'on a à dire. */ .row-right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start; gap:6px 10px;text-align:left;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px} /* Le prix et son étiquette sont UNE unité de lecture : l'étiquette se colle au nombre au lieu de garder la marge négative du gabarit vertical. */ .row-price-label{margin-top:0} .row-price-alt{flex-direction:row;gap:12px;margin-top:0} .row-price-client{margin-top:0} /* Le bouton d'ajout garde sa ligne à lui : coincé entre deux pastilles, il devient une cible trop étroite pour un doigt. */ .row-add{width:100%;margin-top:2px} } .results-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 10px} .results-bar .results-info{margin:0} .hide-prices-toggle{font-size:13px;color:var(--muted);white-space:nowrap} /* ---- agrandissement de la photo produit ---- */ img.row-photo{cursor:zoom-in;transition:border-color .15s} img.row-photo:hover{border-color:var(--brand)} .lightbox{position:fixed;inset:0;background:rgba(16,24,40,.82);display:none; align-items:center;justify-content:center;z-index:2100;padding:5vh 4vw;cursor:zoom-out} .lightbox.open{display:flex} .lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%} .lightbox img{max-width:min(900px,88vw);max-height:78vh;object-fit:contain;background:var(--card); border-radius:9px;padding:14px;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)} .lightbox figcaption{color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em} .lightbox-x{position:absolute;top:18px;right:24px;background:transparent;border:0;color:#fff; font-size:38px;line-height:1;cursor:pointer;opacity:.85} .lightbox-x:hover{opacity:1} /* correctif : un display explicite écrase l'attribut hidden */ [hidden]{display:none !important} /* photo en attente de chargement : léger scintillement, pas de saut de mise en page */ img.row-photo.is-lazy{background:linear-gradient(90deg,var(--bg-soft) 25%,var(--bg-soft) 37%,var(--bg-soft) 63%); background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* ---- correctif : la barre latérale doit tenir sous le bandeau d'impersonation ---- */ .sidebar{height:calc(100dvh - var(--top-bar, 0px)) !important; top:var(--top-bar, 0px) !important; max-height:calc(100dvh - var(--top-bar, 0px))} .side-nav{min-height:0} /* permet au nav de rétrécir avant le pied */ .side-foot{flex-shrink:0; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))} /* ---- Grille des droits (admin + mon équipe) ---- */ .perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px 18px} .perm-grid .check{align-items:flex-start} .perm-capped{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px; font-size:11px;font-weight:600;color:var(--warn-ink);background:var(--warn-fill);border:1px solid var(--warn-line); white-space:nowrap;vertical-align:1px} /* ---- Numéros additionnels, badge CAPA, autre côté (recherche de pièces) ---- */ .at-badge.at-capa{background:#065f46;color:#fff;border-color:#065f46;font-weight:700;letter-spacing:.3px} .num-more{background:none;border:0;padding:0 2px;color:var(--accent);font:inherit;font-size:12px; font-weight:600;cursor:pointer;text-decoration:underline dotted} .num-more:hover{color:var(--warn-hint)} .num-opp{background:none;border:0;padding:0 2px;color:var(--accent);font:inherit;font-size:12px; font-weight:600;cursor:pointer;white-space:nowrap} .num-opp:hover{text-decoration:underline} .row-altnums{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px; padding:8px 10px;background:var(--bg-soft-2);border:1px solid var(--line);border-radius:8px} .row-altnums > i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted); text-transform:none;letter-spacing:0;margin-right:2px} .num-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px; padding:3px 8px;border-radius:6px;background:var(--card);color:var(--ink); border:1px dashed var(--line);cursor:copy;transition:background .12s,border-color .12s} .num-chip:hover{background:var(--warn-bg);border-color:var(--accent)} .num-chip.ok{background:var(--ok-fill);border-color:#16a34a;border-style:solid;color:var(--ok-ink)} .partial-note{margin-left:8px;font-size:12.5px;color:var(--warn-ink);background:var(--warn-bg); border:1px solid var(--warn-line);border-radius:6px;padding:2px 8px;display:inline-block} /* ---- Panneau de détails : numéros additionnels + tableau des compatibilités ---- */ .row-expand{background:none;border:0;padding:4px 0 0;color:var(--accent);font:inherit; font-size:12.5px;font-weight:600;cursor:pointer;text-align:left} .row-expand:hover{color:var(--warn-hint)} .row-expand .caret{display:inline-block;width:11px;font-size:10px} .row-detail{margin-top:8px;padding:10px 12px;background:var(--bg-soft-2); border:1px solid var(--line);border-radius:7px} .row-detail .row-altnums{margin:0 0 10px;padding:0;background:none;border:0} .fits-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card); border:1px solid var(--line);border-radius:7px;overflow:hidden} .fits-table th{text-align:left;padding:6px 9px;background:var(--bg-soft);color:var(--muted); font-size:11px;font-weight:700;text-transform:none;letter-spacing:0; border-bottom:1px solid var(--line);white-space:nowrap} .fits-table td{padding:5px 9px;border-bottom:1px solid var(--line);vertical-align:top} .fits-table tr:last-child td{border-bottom:0} .fits-table tbody tr:hover{background:var(--warn-bg)} .fits-table td.nw{white-space:nowrap;font-variant-numeric:tabular-nums} .fits-table .fits-vars{color:var(--muted);font-size:11.5px;line-height:1.45;max-width:340px} @media (max-width:760px){ .fits-table{font-size:12px} .fits-table th,.fits-table td{padding:4px 6px} .fits-table .fits-vars{display:none} /* la ligne resterait illisible sur mobile */ } /* 110 compatibilités possibles : on borne, sinon le panneau pousse toute la page */ .row-detail .fits-wrap{max-height:340px;overflow:auto;border-radius:7px} .fits-table thead th{position:sticky;top:0;z-index:1} /* ---- Recherche IA : attente, réponse, signalement (sous la boîte de recherche) ---- */ .ai-working{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 13px; background:var(--card);border:1px solid var(--line);border-radius:7px;font-size:13.5px;color:var(--muted)} .ai-elapsed{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px;opacity:.75} .ai-dots{display:inline-flex;gap:4px} .ai-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent); animation:aiPulse 1.05s infinite ease-in-out} .ai-dots i:nth-child(2){animation-delay:.15s} .ai-dots i:nth-child(3){animation-delay:.3s} @keyframes aiPulse{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.ai-dots i{animation:none;opacity:.7}} .ai-answer{margin-top:12px;padding:11px 13px;background:var(--ok-bg); border:1px solid var(--ok-line);border-radius:7px} .ai-answer-head{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5} .ai-check{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:#16a34a;color:#fff; font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px} .ai-answer-head b{color:var(--ok-ink)} .ai-answer-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px; padding-left:27px} .ai-link{background:none;border:0;padding:0;color:var(--ok);font:inherit;font-size:12.5px; font-weight:600;cursor:pointer;text-align:left} .ai-link:hover{text-decoration:underline} .ai-report-btn{background:none;border:0;padding:0;margin-left:auto;color:var(--warn-ink);font:inherit; font-size:12.5px;font-weight:600;cursor:pointer} .ai-report-btn:hover{text-decoration:underline} .ai-reasoning{margin:8px 0 0 27px;padding:9px 11px;background:var(--card);border:1px solid var(--ok-line); border-radius:7px;font-size:12.5px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap} .ai-report{margin:10px 0 0 27px;padding:11px;background:var(--card);border:1px solid var(--warn-line);border-radius:8px} .ai-report label{display:block;font-size:12.5px;font-weight:600;color:var(--warn-ink);margin-bottom:6px} .ai-report textarea{font-size:13px;resize:vertical} .ai-report-actions{display:flex;gap:8px;margin-top:9px} .ai-report-actions .btn{padding:7px 13px;font-size:13px} .ai-thanks{margin:9px 0 0 27px;font-size:13px;font-weight:600;color:var(--ok-ink)} /* ---- « Masquer mes prix » : on cache le prix NÉGOCIÉ, pas le prix détail ---- Usage au comptoir : montrer l'écran au client sans lui révéler le rabais de l'atelier. Le prix détail reste visible : il est public et sert d'argument de vente. */ body.hide-prices .row-price, body.hide-prices .row-price-label, /* Le coût a quitté .row-price-alt pour la boîte employés : la règle est désormais posée sur la classe, pas sur son emplacement. */ body.hide-prices .p-cost{display:none} body.hide-prices .row-price-alt{font-size:15px;color:var(--ink)} body.hide-prices .row-price-alt .p-retail b{font-size:19px;font-weight:700} /* 2026-09-25 : le GRAND chiffre est désormais le DÉTAIL (.row-price-detail), il reste visible. C'est la ligne du client qui disparaît. */ body.hide-prices .row-price.row-price-detail{display:block} body.hide-prices .row-price-client{display:none} /* 2026-09-25 : « Demander cette pièce » en APERÇU (connecté comme client). Le bouton est `disabled`, mais aucune feuille ne donnait d'apparence à un bouton désactivé : il restait orange, cliquable à l'œil. Portée limitée à CE bouton, exprès. */ #demandeGo:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:grayscale(.6)} /* 2026-09-25 : le prix DÉTAIL sous le prix unitaire du panier, en petit — la colonne s'additionne en total, le grand chiffre reste celui qu'on paie. */ .cart-detail{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;font-weight:500} /* 2026-09-25 : « Ajouter au panier » MONTRE qu'il travaille (Max : « quand on clique on ne voit rien travailler »). Pendant l'appel : roue + « Ajout en cours… ». Au succès : un éclair vert sur le bouton et la pastille du panier qui bat. */ .add-cart.is-working{cursor:progress;opacity:.92} .add-cart.is-working::before{content:"";display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ajoutRoue .7s linear infinite} @keyframes ajoutRoue{to{transform:rotate(360deg)}} .add-cart.just-added{animation:ajoutOk 1.2s ease-out} @keyframes ajoutOk{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}100%{box-shadow:0 0 0 12px rgba(22,163,74,0)}} #panierPastille.pulse{animation:panierBat .6s ease-out} @keyframes panierBat{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}} /* Réglages d'affichage regroupés au-dessus de la liste */ .results-opts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto} .results-opts .check{font-size:13px;color:var(--muted);white-space:nowrap} .p-adj{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;font-size:10px; font-weight:700;letter-spacing:.3px;color:var(--warn-ink);background:var(--warn-fill);border:1px solid var(--warn-line)} body.hide-prices .p-adj{display:none} /* ---- Bas de la liste de pièces : trois gestes, le principal à droite ---- */ .cart-actions{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cart-actions .btn-primary{margin-left:auto} .btn-danger-soft{background:var(--err-bg);color:var(--err);border:1px solid var(--err-line)} .btn-danger-soft:hover{background:var(--err-line)} @media (max-width:560px){ .cart-actions{flex-direction:column;align-items:stretch} .cart-actions .btn-primary{margin-left:0;order:-1} /* le geste principal en premier sur mobile */ } .ai-badge{white-space:nowrap} /* Diamond s'AJOUTE à CAPA (jamais à la place) : la pièce porte les deux certifications. */ .at-badge.at-diamond{background:#1e293b;color:#fff;border-color:#1e293b;font-weight:700;letter-spacing:.3px} .at-badge.at-nsf{background:#1e40af;color:#fff;border-color:#1e40af;font-weight:700;letter-spacing:.3px} /* === panier : mise en page empilee sur mobile (2026-08-21) ================== Un tableau a 5 colonnes ne tient pas sur un telephone : le total de ligne et les montants du pied sortaient de l'ecran, avec une barre de defilement horizontale. Sous 720 px on abandonne donc la grille et chaque ligne devient une carte, les etiquettes venant de l'attribut data-label du gabarit. Le rendu bureau n'est pas touche. */ @media (max-width: 720px) { .cart-card { overflow: visible; } /* 🚨 TOUT CE BLOC EST EN `>`, ET C'EST OBLIGATOIRE. Depuis le 2026-09-01 la ligne du panier contient un TABLEAU IMBRIQUE (les applications de la piece). Ecrits en descendant, ces selecteurs l'empilaient LUI AUSSI : son en-tete disparaissait, chacune de ses cellules passait sur sa propre ligne, et les cellules vides prenaient toute la largeur. Mesure du 2026-09-01, capture de Max : « ACURA / ILX / 2019-2022 » sur trois lignes dans un grand cadre blanc a moitie vide. ⚠️ Le tableau imbrique doit rester un TABLEAU : il defile horizontalement (`.fits-wrap{overflow-x:auto}`) plutot que de s'empiler. */ .cart-tbl > thead { display: none; } .cart-tbl, .cart-tbl > tbody, .cart-tbl > tfoot, .cart-tbl > tbody > tr, .cart-tbl > tbody > tr > td { display: block; width: 100%; } .cart-tbl > tbody > tr { position: relative; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); } .cart-tbl > tbody > tr:last-child { border-bottom: 0; } .cart-tbl > tbody > tr > td { padding: 5px 0; border: 0; text-align: left !important; } /* l'article garde toute la largeur, sans etiquette, avec de la place a droite pour le bouton de suppression place en absolu */ .cart-tbl > tbody > tr > td:first-child { padding-right: 34px; } .cart-tbl > tbody > tr > td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cart-tbl > tbody > tr > td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; text-transform:none; letter-spacing:0; } .cart-tbl > tbody > tr > td.line-total { font-weight: 600; } .cart-tbl > tbody > tr > td.cell-remove { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; } /* La ligne de detail n'est pas une ligne d'article : ni bordure du bas, ni bouton de suppression a loger, et son contenu occupe toute la largeur. */ .cart-tbl > tbody > tr.ligne-detail { padding-top: 0; border-bottom: 0; } .cart-tbl > tbody > tr.ligne-detail > td:first-child { padding-right: 0; } /* pied : un bloc de totaux, pas des colonnes */ .cart-tbl > tfoot > tr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 14px; } .cart-tbl > tfoot > tr > td { padding: 0; border: 0; display: block; text-align: left !important; } .cart-tbl > tfoot > tr > td:last-child { display: none; } /* la cellule vide du gabarit */ .cart-tbl > tfoot > tr:first-child { padding-top: 14px; border-top: 1px solid var(--line); } .cart-tbl > tfoot > tr:last-child { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 12px; padding-bottom: 16px; font-size: 16px; } /* la ligne d'avertissement « taxes calculees a la commande » occupe tout */ .cart-tbl > tfoot > tr > td[colspan="5"] { text-align: left !important; } } /* ─── Soumission de commande ──────────────────────────────────────────────── Conçu pour le téléphone d'abord : une colonne, des cibles tactiles de 44 px, et le total collé en bas pour qu'il ne disparaisse jamais au défilement. Le deux-colonnes n'apparaît qu'au-dessus de 900 px. */ .co-grid{display:block} .co-card{margin-bottom:14px} .co-h{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:.01em} .co-note{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45} /* Modes de livraison : des cartes cliquables, pas un menu déroulant. Trois options se lisent d'un coup d'œil, et le tarif est visible AVANT le clic. */ .ship-list{display:flex;flex-direction:column;gap:8px} .ship-opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--line,var(--line)); border-radius:8px;cursor:pointer;background:var(--card,var(--card));transition:border-color .12s,background .12s} .ship-opt:hover{border-color:var(--accent,#e8951f)} .ship-opt.on{border-color:var(--accent,#e8951f);background:rgba(232,149,31,.06)} .ship-opt input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--accent,#e8951f);margin:0} .ship-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ship-name{font-weight:600;font-size:14.5px} .ship-descr{color:var(--muted);font-size:12px;line-height:1.35} .ship-fee{flex:0 0 auto;font-weight:600;font-size:13.5px;white-space:nowrap} .co-check{display:flex;align-items:center;gap:9px;margin-top:10px;cursor:pointer;font-size:13.5px} .co-check input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--accent,#e8951f);margin:0} textarea.input{resize:vertical;min-height:60px;font-family:inherit;line-height:1.45} /* Récapitulatif */ .co-sum .sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0} .co-sum .sum-row small{color:var(--muted);font-size:11.5px;font-weight:400} .co-sum .sum-total{border-top:1px solid var(--line,var(--line));margin-top:6px;padding-top:11px;font-size:16px} .co-sum .sum-total b{font-size:18px} .co-submit{width:100%;margin-top:16px;padding:13px} .co-back{width:100%;margin-top:8px;text-align:center} /* Barre collée : visible seulement sur téléphone, et seulement là où elle sert. */ /* Hauteur de la barre collee, declaree UNE fois : le rembourrage du bas s'en sert. Deux nombres separes divergent des qu'on touche a l'un des deux. */ :root{--co-bar-h:72px} .co-bar{display:none} @media (max-width:900px){ /* Le récapitulatif passe SOUS le formulaire, on ne demande pas de valider un total avant d'avoir rempli ce qui le détermine. */ .co-sum .co-submit,.co-sum .co-back{display:none} .co-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40; align-items:center;gap:12px;padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:var(--card,var(--card));border-top:1px solid var(--line,var(--line)); box-shadow:0 -3px 14px rgba(0,0,0,.09)} .co-bar-tot{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15} .co-bar-tot span{color:var(--muted);font-size:11.5px} .co-bar-tot b{font-size:17px} .co-bar .btn{flex:0 0 auto;padding:12px 20px} /* 🚨 LA BULLE DU CLAVARDAGE PASSAIT PAR-DESSUS « Soumettre la commande ». Signale par Max, capture a l'appui, 2026-09-01. Mesure a 412 px : la barre occupe y 736-800 et son bouton x 182-398 ; la bulle, en `position:fixed` a z-index 900 contre 40, se posait a x 348-400 — 48 px du bouton, dont le coin cliquable. ⚠️ `min-height` DECLAREE sur la barre : le retrait de la bulle est calcule a partir d'elle, et non d'une hauteur devinee. Si le contenu de la barre grandit au-dela, le banc le voit (il mesure le chevauchement, pas la valeur). */ .co-bar{min-height:64px} .a-barre-action .clav{bottom:calc(64px + 14px + env(safe-area-inset-bottom))} /* De la place sous le dernier bloc, sinon la barre le recouvre. */ /* ⚠️ Le rembourrage visait .co-grid : un conteneur qui n'existe plus depuis que la commande est dans le panier. La barre recouvrait donc le dernier bouton (« Supprimer la liste »), signale le 2026-08-22. On vise maintenant les conteneurs qui existent VRAIMENT, et on ajoute la zone sure de l'ecran pour les telephones a encoche. */ .co-grid, #coForm{padding-bottom:calc(var(--co-bar-h) + env(safe-area-inset-bottom) + 12px)} .ship-opt{padding:15px 14px} /* cible tactile confortable */ .co-card{margin-bottom:12px} } @media (min-width:901px){ .co-grid{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start} .co-side{position:sticky;top:16px} } /* ─── Soumission : blocs ajoutés le 2026-08-21 ───────────────────────────── */ .co-block{border-left:4px solid var(--danger,#c0392b)} .co-block-t{margin:0 0 10px;font-weight:600} .co-h-n{display:inline-block;min-width:20px;padding:1px 7px;margin-left:6px;border-radius:12px; background:var(--line,var(--bg-soft));color:var(--muted);font-size:11.5px;font-weight:600;vertical-align:middle} /* Ce qui est commandé : une ligne = une pièce. Sur téléphone, le nom passe au-dessus et les chiffres restent alignés à droite. */ .co-items{list-style:none;margin:0;padding:0} .co-item{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:baseline; padding:9px 0;border-bottom:1px solid var(--line,var(--line))} .co-item:last-child{border-bottom:0} .co-item.short{background:rgba(192,57,43,.05);margin:0 -8px;padding:9px 8px;border-radius:6px} .ci-main{min-width:0;display:flex;flex-direction:column;gap:1px} .ci-nom{color:var(--muted);font-size:12px;line-height:1.35} .ci-tag{align-self:flex-start;margin-top:3px;padding:1px 7px;border-radius:12px; background:rgba(232,149,31,.14);color:var(--warn-ink);font-size:10.5px;font-weight:600} .ci-qty{color:var(--muted);font-size:12.5px;white-space:nowrap} .ci-tot{font-weight:600;font-size:13.5px;white-space:nowrap;text-align:right;min-width:76px} .co-edit{display:inline-block;margin-top:12px;font-size:13px} .co-pickup{margin:2px 0 14px;padding:11px 13px;border-radius:7px; background:rgba(232,149,31,.08);color:var(--muted);font-size:13px;line-height:1.5} .co-custom{margin-top:-2px;padding:13px;border:1px dashed var(--line,var(--line));border-radius:8px} .co-row{display:flex;gap:10px;flex-wrap:wrap} .co-row .field{flex:1 1 auto;min-width:0} .co-row .co-narrow{flex:0 0 110px} @media (max-width:560px){ /* Le nom d'abord, les chiffres sur une ligne à eux : sinon tout se serre. */ .co-item{grid-template-columns:1fr auto} .ci-qty{grid-column:1;font-size:12px} .ci-tot{grid-column:2;grid-row:2} .co-row .co-narrow{flex:1 1 calc(50% - 5px)} } /* ─── Sections repliées du panier ────────────────────────────────────────────
natif : s'ouvre sans JS, accessible au clavier, et le résumé porte l'état, on sait ce qui est choisi sans rien déplier. */ .dt{background:var(--card,var(--card));border:1px solid var(--line,var(--line));border-radius:9px; margin-bottom:10px;overflow:hidden} .dt>summary{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer; list-style:none;user-select:none;min-height:52px} .dt>summary::-webkit-details-marker{display:none} .dt>summary::after{content:'';flex:0 0 8px;height:8px;margin-left:auto; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(-45deg);transition:transform .15s} .dt[open]>summary::after{transform:rotate(45deg)} .dt>summary:hover{background:rgba(0,0,0,.015)} .dt-lbl{flex:0 0 auto;font-weight:600;font-size:14.5px} .dt-val{flex:1 1 auto;min-width:0;color:var(--muted);font-size:13px;text-align:right; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dt-body{padding:2px var(--pad-x,16px) 16px;border-top:1px solid var(--line,var(--line))} .dt[open]>summary{background:rgba(0,0,0,.02)} /* Le total, juste avant le bouton : la derniere chose lue avant de cliquer. */ .co-sum{margin-bottom:10px} .cart-actions{display:flex;flex-direction:column;gap:9px} .cart-actions .btn{width:100%} @media (min-width:761px){ .cart-actions{flex-direction:row;justify-content:flex-end;flex-wrap:wrap} .cart-actions .btn{width:auto} .cart-actions #btnSubmit{order:9} } @media (max-width:900px){ /* ⚠️ MEME point de rupture que .co-bar (900px). A 760px, entre 761 et 900 la barre s'affichait ET le bouton de la carte restait visible : deux boutons pour le meme geste, sur la meme page. */ .cart-actions #btnSubmit{display:none} .dt>summary{padding:16px} .dt-val{font-size:12.5px} } /* Piece qui vient d'une autre succursale : dit, jamais cache. */ .pill-succ{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:12px; background:rgba(60,110,190,.12);color:var(--info-ink);font-size:10.5px;font-weight:600; vertical-align:middle;white-space:nowrap} /* ─── Administration : activité ──────────────────────────────────────────── */ .act-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between} .act-fenetre{display:flex;gap:6px;flex-wrap:wrap} .chip{display:inline-block;padding:5px 12px;border:1px solid var(--line,var(--line));border-radius:12px; font-size:12.5px;text-decoration:none;color:inherit} .chip.on{background:var(--accent,#e8951f);border-color:var(--accent,#e8951f);color:var(--sur-marque);font-weight:600} .act-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .act-filtres .input{width:auto;min-width:150px} .act-tuiles{display:flex;flex-wrap:wrap;gap:10px} .tuile{flex:1 1 120px;min-width:110px;padding:12px 14px;border:1px solid var(--line,var(--line)); border-radius:8px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px} .tuile b{font-size:20px;line-height:1.1} .tuile span{color:var(--muted);font-size:11.5px} .tuile.on{border-color:var(--accent,#e8951f);background:rgba(232,149,31,.07)} .tuile.fort b{color:var(--accent,#e8951f)} .act-ratios{display:flex;flex-wrap:wrap;gap:18px} .act-ratios div{flex:1 1 160px;display:flex;flex-direction:column} .act-ratios b{font-size:24px;line-height:1.1} .act-ratios span{color:var(--muted);font-size:12px} .act-avert{background:rgba(60,110,190,.06);border-left:3px solid #2b5a9b;font-size:13px;line-height:1.55} .act-tbl td,.act-tbl th{white-space:nowrap;font-size:12.5px} .act-tbl td.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px} .act-tbl tr.on{background:rgba(232,149,31,.09)} .sous{color:var(--muted);font-size:11px} .alerte{color:var(--err)} .btn-min{padding:4px 10px;font-size:12px} .genre{display:inline-block;padding:1px 8px;border-radius:12px;font-size:10.5px;font-weight:600; background:var(--line,var(--bg-soft));color:var(--muted);white-space:nowrap} .genre.g-order{background:rgba(232,149,31,.16);color:var(--warn-ink)} .genre.g-search{background:rgba(60,110,190,.12);color:var(--info-ink)} .genre.g-login{background:rgba(40,140,90,.13);color:var(--ok-ink)} @media (max-width:760px){ .act-tbl{min-width:640px} .act-filtres .input{min-width:0;flex:1 1 130px} } .act-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} .sect{margin:22px 0 10px;font-size:16px;font-weight:600} .tuile.fort{border-color:var(--accent,#e8951f);background:rgba(232,149,31,.09)} /* « Se connecter comme » : le raccourci du quotidien, en haut de l accueil de l employe et de l administration. */ /* Une carte posee DIRECTEMENT dans le flux : `.card` n'a aucune marge, et l'espace venait jusqu'ici de l'element voisin. Deux fois le meme defaut le 2026-08-29 (la boite « se connecter comme », puis la page Contact apres retrait de l'encadre) : une classe nommee plutot qu'une regle par cas. 18 px, le rythme de `.page-title`. GOTCHAS b2b 82. */ .card-flux{margin-bottom:18px} .imp-quick form{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .imp-quick label{flex:0 0 auto;font-size:14px} .imp-quick .input{flex:1 1 260px;max-width:420px} .imp-err{margin:8px 0 0;color:var(--err);font-size:13px} .imp-choix{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .imp-choix .btn{text-align:left} @media (max-width:600px){.imp-quick .input{flex:1 1 100%}.imp-quick .btn{width:100%}} /* Autocomplete de « se connecter comme ». */ .imp-ac{position:relative;flex:1 1 260px;max-width:420px;display:block} .imp-ac .input{width:100%;max-width:none} .imp-ac-liste{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px; list-style:none;background:var(--card,var(--card));border:1px solid var(--line,var(--line)); border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.12);max-height:320px;overflow:auto} .imp-ac-liste li{padding:8px 10px;border-radius:7px;cursor:pointer;display:flex;flex-direction:column;gap:1px} .imp-ac-liste li b{font-size:13.5px;font-weight:600} .imp-ac-liste li span{color:var(--muted);font-size:11.5px} .imp-ac-liste li:hover,.imp-ac-liste li.on{background:rgba(232,149,31,.13)} @media (max-width:600px){.imp-ac{flex:1 1 100%;max-width:none}} /* ─── Moissonnage : score, raisons, agent ───────────────────────────────── Le score n'est jamais montre seul : la ligne de raisons juste dessous porte le POURQUOI, et c'est elle qui rend le chiffre contestable. */ .moiss-score{display:inline-block;min-width:38px;text-align:center;padding:3px 8px; border-radius:999px;font-weight:700;font-size:13px;border:1px solid transparent} .moiss-score.bas{color:var(--muted);border-color:var(--line,var(--line))} .moiss-score.moyen{color:var(--warn-hint);background:rgba(232,149,31,.14);border-color:rgba(232,149,31,.45)} .moiss-score.haut{color:#fff;background:#c0392b;border-color:#a53227} .moiss-chaud>td{background:rgba(192,57,43,.045)} .moiss-raisons>td{padding-top:0;padding-bottom:10px;white-space:normal} .moiss-chip{display:inline-block;margin:2px 6px 2px 0;padding:2px 9px;border-radius:999px; background:var(--soft,var(--bg-soft));border:1px solid var(--line,var(--line)); font-size:11.5px;color:var(--muted);white-space:normal} .moiss-chip b{color:var(--err);font-weight:700} .moiss-ua{max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block; vertical-align:bottom;font-size:11px} @media (max-width:700px){.moiss-ua{max-width:150px}} /* ─── Document d'une transaction : le PDF lui-meme, pas une approximation ── Le cadre affiche le PDF sur ecran large. Sur telephone, iOS n'affiche que la premiere page figee dans un cadre : on bascule sur un bouton qui ouvre le lecteur de l'appareil, lui capable de feuilleter. */ .doc-cadre{padding:0;overflow:hidden} .doc-pdf{width:100%;height:78vh;min-height:420px;border:0;background:#fff;display:block} .doc-mobile{display:none;padding:26px 20px;text-align:center} .doc-mobile p{color:var(--muted);font-size:13.5px;margin:0 0 14px} @media (max-width:760px){ .doc-pdf{display:none} .doc-mobile{display:block} } /* ─── Document en HTML, vue de lecture ─────────────────────────────────── Pensee pour l'ecran d'abord : sur telephone le tableau de lignes devient une pile de fiches, parce qu'un tableau a 6 colonnes sur 360 px ne se lit pas, il se devine. L'impression reste le PDF. */ .doc{background:#fff;color:#16202b;padding:26px 28px;font-size:13px;line-height:1.5} .doc-tete{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap; padding-bottom:16px;border-bottom:2px solid #16202b} .doc-marque{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .doc-logo{height:34px;width:auto} .doc-succ{font-size:11px;color:#4a5763;line-height:1.65} .doc-ident{text-align:right;margin-left:auto} .doc-ident h2{margin:0;font-size:23px;letter-spacing:.4px} .doc-taxes-no{margin-top:6px;font-size:10.5px;color:#4a5763;display:flex;flex-direction:column} .doc-adresses{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:18px 0} .doc-adresses h3{margin:0 0 5px;font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:#6b7885} .doc-adresses .vide{color:#93a0ad} .doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 18px; background:#f4f6f9;border-radius:8px;padding:12px 14px;margin-bottom:18px} .doc-meta div{display:flex;flex-direction:column;min-width:0} .doc-meta span{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#6b7885} .doc-meta b{font-size:12.5px;overflow-wrap:anywhere} .doc-lignes{width:100%;border-collapse:collapse;margin-bottom:18px} .doc-lignes th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#6b7885; text-align:left;padding:7px 8px;border-bottom:1px solid #d8dee6;white-space:nowrap} .doc-lignes td{padding:9px 8px;border-bottom:1px solid #eef1f5;vertical-align:top} .doc-lignes .n{text-align:right;white-space:nowrap} .doc-lignes th.n{text-align:right} .doc-lignes .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap} .doc-oem{display:block;font-size:11px;color:#6b7885;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .doc-bas{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start} .doc-mentions{flex:1 1 240px;font-size:11px;color:#4a5763;line-height:1.7} .doc-memo{font-weight:600;color:#16202b} .doc-totaux{flex:0 0 280px;margin:0} .doc-totaux div{display:flex;justify-content:space-between;gap:16px;padding:6px 0} .doc-totaux dt{color:#4a5763} .doc-totaux dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap} .doc-totaux .total{border-top:2px solid #16202b;margin-top:5px;padding-top:9px;font-size:16px;font-weight:700} /* Bascule PDF / HTML */ .doc-bascule{display:inline-flex;border:1px solid var(--line,#e4e9ee);border-radius:999px;overflow:hidden} .doc-bascule a{padding:7px 15px;font-size:12.5px;text-decoration:none;color:var(--muted)} .doc-bascule a.on{background:var(--accent,#e8951f);color:var(--sur-marque);font-weight:600} @media (max-width:760px){ .doc{padding:18px 15px} .doc-adresses{grid-template-columns:1fr} .doc-ident{text-align:left;margin-left:0} /* Le tableau devient une pile de fiches : chaque cellule porte son libelle. */ .doc-lignes thead{display:none} .doc-lignes,.doc-lignes tbody,.doc-lignes tr,.doc-lignes td{display:block;width:100%} .doc-lignes tr{border:1px solid #e4e9ee;border-radius:8px;padding:8px 10px;margin-bottom:10px} .doc-lignes td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;text-align:right} .doc-lignes td::before{content:attr(data-l);color:#6b7885;font-size:10.5px;letter-spacing:.7px; text-transform:uppercase;text-align:left;flex:0 0 auto} .doc-lignes td.ref,.doc-lignes .doc-oem{text-align:right} .doc-totaux{flex:1 1 100%} } @media print{ .doc-bascule,.act-nav{display:none} .doc{padding:0;font-size:11.5px} } /* Mobile : la description a besoin de toute la largeur, le libelle passe au-dessus au lieu de comprimer le texte dans une colonne de 40 %. */ @media (max-width:760px){ .doc-lignes td.desc{flex-direction:column;align-items:stretch;text-align:left;padding-top:6px} .doc-lignes td.desc::before{margin-bottom:3px} .doc-lignes td.desc .doc-oem{text-align:left;margin-top:2px} } /* Choix du format des documents : deux cartes cliquables plutot que deux boutons radio nus, le meme geste au doigt qu'a la souris. */ /* ⚠️ `stretch`, pas `center`. Mesure du 2026-09-14 : avec `center`, les trois pastilles du format de document faisaient 71, 71 et 49 px de haut — celle dont le libelle tient sur une ligne flottait au milieu d'une rangee de 71. */ .fmt-choix{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch} /* ⚠️ 190 et non 240. Dans la colonne etroite de « Mon compte » (483 px de contenu), deux pastilles a 240 demandent 2x240+10 = 490 px : il en MANQUE 7, et les quatre pastilles theme/langue basculent a UNE par rangee, faisant passer la carte de 2 a 4 rangees. Sept pixels decidaient de la mise en page. A 190 : 2x190+10 = 390, deux tiennent toujours a 483, et trois tiennent toujours a 750 dans la colonne large (3x190+20 = 590). */ .fmt-opt{flex:1 1 190px;display:flex;align-items:center;gap:10px;padding:12px 14px; border:1px solid var(--line,var(--line));border-radius:8px;cursor:pointer} .fmt-opt.on{border-color:var(--accent,#e8951f);background:rgba(232,149,31,.07)} /* Trois choix dans une colonne etroite : a 190 px de base ils se rangent 2 + 1, et le troisieme, seul sur sa rangee, s'etire sur toute la largeur. Il se lit alors comme un bouton et non comme un choix parmi trois. On empile franchement. */ .fmt-empile .fmt-opt{flex:1 1 100%} .fmt-opt b{font-weight:600;font-size:13.5px} .fmt-opt input{margin:0;flex:0 0 auto} /* ⚠️ La regle « le bouton prend toute la largeur sur telephone » a ete RETIREE le 2026-09-14 : elle visait `.fmt-choix .btn`, et le bouton n'est plus dans `.fmt-choix`. Elle ne selectionnait donc plus rien. */ /* ─── Deux colonnes INDEPENDANTES (« Mon compte ») ──────────────────────────── `.dash-cols` seule est une grille par RANGEES : la rangee 1 prend la hauteur de la plus HAUTE de ses deux cartes, et une carte courte a droite laisse un vide jusqu'a la rangee suivante. Mesure du 2026-09-14 sur « Mon compte » : 299 px de vide sous « Appearance », et « My addresses » 116 px plus bas que la colonne de gauche. ⚠️ On ne CORRIGE pas `.dash-cols` : le tableau de bord et l'ecran des annonces s'en servent, et leurs cartes sont appariees par rangee a dessein. On ajoute une variante, et on l'applique a la seule page qui en a besoin. Les enfants directs de `.cols-flux` sont les COLONNES ; les cartes sont dedans. */ .cols-flux{align-items:start} .cols-flux > .col{display:flex;flex-direction:column;gap:16px;min-width:0} @media (max-width:900px){ /* Une seule colonne : les deux piles se suivent, et le `gap` de la grille separe la derniere carte de l'une de la premiere de l'autre. */ .cols-flux > .col{gap:16px} } /* ─── Credit : un avertissement, et rien d'autre ────────────────────────── Decision de Max (2026-08-22) : pas de plafond affiche, pas de solde, pas de barre. On ne parle que quand la commande depasse, ou que le compte est en retenue. Ne jamais afficher de chiffre, c'est aussi ne jamais risquer d'annoncer un plafond de zero a un client qui n'en a pas (chez NetSuite, creditlimit = 0 veut dire « aucune limite »). */ .cred-avis{margin:12px 0 0;padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.5; color:var(--err);background:rgba(192,57,43,.08);border-left:3px solid #c0392b} /* ─── Clavardage ────────────────────────────────────────────────────────── Une bulle, un panneau. Aucune mise en scene : pas d'animation d'attente, pas de faux « en train d'ecrire ». L'equipe repond en minutes, pas en secondes, et l'interface ne doit pas pretendre le contraire. */ .clav{position:fixed;right:18px;bottom:18px;z-index:900} .clav-bulle{position:relative;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer; background:var(--accent,#e8951f);color:var(--sur-marque);display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.22)} .clav-bulle:hover{filter:brightness(1.06)} .clav-pastille{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px; border-radius:999px;background:#c0392b;color:#fff;font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;border:2px solid #fff} .clav-panneau{position:absolute;right:0;bottom:64px;width:340px;max-height:70vh;display:flex; flex-direction:column;background:var(--card);border:1px solid var(--line,var(--line));border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.18);overflow:hidden} .clav-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px; padding:12px 14px;border-bottom:1px solid var(--line,var(--line))} .clav-tete b{display:block;font-size:14px} .clav-etat{font-size:11.5px;color:var(--muted)} .clav-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:0 2px} .clav-fil{flex:1 1 auto;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px; min-height:140px;background:var(--soft,var(--bg-soft-2))} .clav-vide{color:var(--muted);font-size:12.5px;text-align:center;margin:auto} .clav-m{max-width:84%;padding:8px 11px;border-radius:9px;font-size:13px;line-height:1.45} .clav-m p{margin:0} .clav-m time{display:block;margin-top:3px;font-size:10.5px;opacity:.65} .clav-m b{display:block;font-size:11px;margin-bottom:2px;opacity:.75} .clav-m.moi{align-self:flex-end;background:var(--accent,#e8951f);color:var(--sur-marque);border-bottom-right-radius:4px} .clav-m.eux{align-self:flex-start;background:var(--card);border:1px solid var(--line,var(--line));border-bottom-left-radius:4px} .clav-saisie{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line,var(--line))} .clav-saisie textarea{flex:1 1 auto;resize:none;border:1px solid var(--line,var(--line));border-radius:7px; padding:8px 10px;font:inherit;font-size:13px;max-height:110px} .clav-ferme{padding:14px;border-top:1px solid var(--line,var(--line));font-size:12.5px;line-height:1.55} .clav-ferme b{display:block;margin-bottom:4px} .clav-ferme p{margin:0;color:var(--muted)} /* Sur telephone, le panneau prend l'ecran : un panneau de 340 px sur 360 px deborde, et un clavardage qui deborde ne se lit pas. */ @media (max-width:600px){ .clav{right:12px;bottom:12px} .clav-panneau{position:fixed;inset:auto 10px 76px 10px;width:auto;max-height:72vh} } @media print{ .clav{display:none} } /* Le fil, cote administration : plus large, avec le contexte de la question. */ .clav-admin{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto} .clav-adm-m{max-width:70%} .clav-adm-m time{opacity:.6} .clav-ctx{margin-top:6px;padding:6px 8px;border-radius:7px;background:rgba(0,0,0,.05);font-size:11px;line-height:1.5} .clav-ctx span{display:block;font-size:9.5px;letter-spacing:0;text-transform:none;opacity:.7} .clav-ctx .mono{word-break:break-all;opacity:.75} @media (max-width:700px){ .clav-adm-m{max-width:92%} } /* Etiquette lue par les lecteurs d'ecran, invisible a l'oeil. Le clavardage l'utilise pour son champ de saisie : un textarea sans etiquette n'est pas accessible, et une etiquette visible mangeait la moitie du panneau. */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Compteur de conversations en attente, dans le menu lateral. */ .side-pastille{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:999px; background:#c0392b;color:#fff;font-size:11px;font-weight:700;font-style:normal; display:inline-flex;align-items:center;justify-content:center} /* Defilement horizontal des tableaux etroits. ⚠️ Constate le 2026-08-25 : 6 tableaux n'avaient AUCUN conteneur, dont la recherche de pieces et le tableau de bord, les deux ecrans les plus vus par un client, donc ceux qu'on ouvre le plus souvent sur un telephone. */ .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch} .tab-panel:not([hidden]){overflow-x:auto} /* Le titre d'un groupe de resultats. Un reperage de lecture, pas un bouton : pas de fond, pas de bordure, juste un filet qui court jusqu'au bord pour que l'oeil sache ou une section commence. Le compteur reste discret, il repond a « combien dans celui-la » sans concurrencer le titre. */ .grp{display:flex;align-items:center;gap:10px;margin:26px 0 10px;font-size:12.5px; font-weight:700;color:var(--lien);text-transform:none;letter-spacing:0} .grp:first-child{margin-top:2px} .grp b{font-weight:600;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0} .grp::after{content:"";flex:1;height:1px;background:var(--line)} @media (max-width:640px){.grp{font-size:11.5px;margin:20px 0 8px}} /* Le stock par succursale, employes seulement. Discret et monospace : c'est un relevé qu'on lit en diagonale au telephone, pas un argument de vente. */ .pill-inv{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:11px; font-variant-numeric:tabular-nums} .pill-inv span{padding:1px 7px;border-radius:12px;white-space:nowrap} .pill-inv .inv-ok{background:var(--ok-bg);color:var(--ok)} .pill-inv .inv-no{background:var(--bg-soft);color:var(--muted)} .pill-inv b{font-weight:700} /* Pastille d'apercu des themes (Mon compte). Couleurs figees : voir ci-dessus. */ .apercu-theme{width:30px;height:20px;border-radius:5px;display:inline-block; flex:0 0 auto;margin-left:auto;position:relative;overflow:hidden} .apercu-theme::after{content:'';position:absolute;right:3px;top:3px;width:7px;height:7px; border-radius:50%;background:#e9861e} .ap-clair{background:#ffffff;border:1px solid #d1d5db; box-shadow:inset 0 -7px 0 #f4f5f7} .ap-sombre{background:#1a1e25;border:1px solid #3d4552; box-shadow:inset 0 -7px 0 #12151a} /* ═══════════════════════════════════════════════════════════════════════════ SUIVI DE COMMANDES / RETOURS (2026-08-29) Une grille, pas un tableau : chaque commande est un GROUPE qui porte ses propres enfants (expéditions, factures, paiements). Un aurait imposé des `rowspan` qui se cassent dès qu'un groupe a un enfant de plus. ⚠️ Tout passe par les jetons du thème : la boîte doit être juste dans les deux thèmes ET dans les deux chartes, sans une couleur en dur. ═════════════════════════════════════════════════════════════════════════ */ .suivi{margin-top:0} .suivi-tete{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;padding:16px 20px 0} .suivi-tete h2{margin:0;font-size:17px} .suivi-choix{display:flex;gap:4px;flex-wrap:wrap} .sv-vue{border:1px solid var(--line);background:var(--card);color:var(--ink-2); font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer} .sv-vue:hover{background:var(--bg-soft)} .sv-vue.on{background:var(--brand);border-color:var(--brand);color:var(--sur-marque,#fff)} .suivi-sous{display:flex;gap:2px;padding:12px 20px 0;border-bottom:1px solid var(--line);margin-top:12px} .sv-etat{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted); font:inherit;font-size:13.5px;font-weight:600;padding:8px 12px;margin-bottom:-1px;cursor:pointer} .sv-etat.on{color:var(--lien,var(--brand-dark));border-bottom-color:var(--brand)} .suivi-corps{padding:0 0 8px} .sv-attente,.sv-vide-bloc{padding:26px 20px;color:var(--muted);text-align:center;font-size:13.5px} /* La fenetre couverte par une carte, dite a cote du titre. Une liste tronquee en silence fait croire au client qu'il a perdu un estime. */ .sv-fenetre{font-size:12px;color:var(--muted);font-weight:600;margin-left:10px;white-space:nowrap} /* Le renvoi vers la page qui, elle, porte TOUT. Discret : c'est une sortie, pas une action. */ .sv-plus{padding:14px 20px;border-top:1px solid var(--line)} .sv-plus a{font-size:13px;font-weight:600;color:var(--brand);text-decoration:none} .sv-plus a:hover{text-decoration:underline} .sv-h3{margin:18px 20px 6px;font-size:12.5px;color:var(--muted);font-weight:700} /* ⚠️ LA GRILLE NE VIT PLUS ICI, ET C'EST LE CORRECTIF. `.sv-th` et `.sv-l` ne portent que la mise en page commune ; les colonnes viennent d'UNE classe de grille que l'en-tête et les lignes reçoivent ENSEMBLE (constante `GRILLE` dans dashboard.blade.php). Avant, `.sv-th` portait par défaut la grille des RETOURS. Un en-tête rendu sans classe s'affichait donc sur 6 colonnes au-dessus de lignes qui en avaient 3 : c'est le décalage des paiements, signalé par Max le 2026-08-30 — et déjà celui des estimés le 2026-08-29, que j'avais corrigé en ajoutant `.sv-th-est` au lieu de supprimer la valeur par défaut. Corriger la cellule n'est pas corriger la classe de défaut (GOTCHAS b2b #91) : il restait deux autres appels d'`entete()` sans classe. Sans grille par défaut, un oubli produit une COLONNE UNIQUE : une panne qui se voit, au lieu d'un décalage qui se devine. */ .sv-th,.sv-l{display:grid;gap:10px;align-items:center;padding:10px 20px} /* RETOURS — 6 colonnes. Sert aussi aux factures sans commande, qui ont la même forme (no, PO, date, vide, payée, montant). */ .sv-ret{grid-template-columns:minmax(150px,1.4fr) minmax(90px,.9fr) minmax(96px,.9fr) minmax(96px,.9fr) minmax(96px,.9fr) minmax(110px,1fr)} .sv-th{font-size:11.5px;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line)} /* Les COMMANDES portent une colonne de plus — « Préparée », lue dans le WMS (demande de Max, 2026-08-29). Les retours en gardent six : élargir la grille commune aurait décalé toutes leurs lignes d'un cran, exactement le défaut du 2026-08-24. */ .sv-cmd{grid-template-columns:minmax(140px,1.3fr) minmax(80px,.8fr) minmax(88px,.8fr) minmax(80px,.7fr) minmax(80px,.7fr) minmax(80px,.7fr) minmax(104px,1fr)} /* Une préparation partielle n'est pas un crochet : le compte est l'information. */ .sv-part{font-size:12.5px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums} /* Lot OUVERT : ni fait, ni rien. Discret, mais pas invisible. */ .sv-encours{color:var(--brand);font-weight:700;letter-spacing:1px} /* La remise se lit A COTE du montant encaisse, pas a sa place : les deux ne disent pas la meme chose. */ .sv-remise{display:inline-block;font-size:11.5px;font-weight:700;color:var(--brand); background:rgba(243,154,0,.12);border-radius:5px;padding:1px 6px;white-space:nowrap} .sv-l{border-bottom:1px solid var(--line);font-size:13.5px} .sv-grp{border-bottom:1px solid var(--line)} .sv-grp .sv-l{border-bottom:0} .sv-grp:hover{background:var(--bg-soft-2)} /* PAIEMENTS — 3 colonnes (no, date, montant). */ .sv-pay{grid-template-columns:minmax(150px,1.4fr) minmax(120px,1fr) minmax(110px,1fr)} /* ESTIMÉS — 5 colonnes, la 5e étant la colonne d'actions. */ .sv-est{grid-template-columns:minmax(140px,1.2fr) minmax(90px,.8fr) minmax(110px,.9fr) minmax(110px,.9fr) minmax(120px,1fr)} /* ⚠️ `entete()` ne pose `sv-tot` que sur la DERNIERE cellule, qui est ici la colonne d'actions, vide : c'est la 4e qu'il faut aligner a droite. */ .sv-th.sv-est > div:nth-child(4){text-align:right} .sv-no{font-weight:600} .sv-po{color:var(--ink-2)} .sv-dt{color:var(--ink-2);white-space:nowrap} .sv-tot{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .sv-vide{color:var(--muted)} .sv-du{display:block;font-size:11.5px;font-weight:600;color:var(--warn-ink)} .sv-act{text-align:right;white-space:nowrap} /* ═══ Une ligne se DÉPLOIE ═══ Demande de Max : « la ligne principale contient l'info principale, et s'il clique dessus, là il peut tout voir ». Une page de un kilomètre ne se lit pas ; une liste de commandes, oui. ⚠️ Seules les lignes qui ONT quelque chose à montrer sont cliquables : un curseur qui change sur une ligne sans détail promet ce qui n'existe pas. */ .sv-grp .sv-enf{display:none} .sv-grp.is-ouvert .sv-enf{display:block} .sv-grp.a-detail .sv-l{cursor:pointer} .sv-chev{display:inline-block;margin-left:6px;color:var(--muted);font-size:11px; transition:transform .12s ease;transform:rotate(0deg)} .sv-grp.is-ouvert .sv-chev{transform:rotate(90deg)} .sv-grp.a-detail .sv-l:focus-visible{outline:2px solid var(--ring);outline-offset:-2px} /* Les enfants d'une commande : décalés, plus petits, jamais en concurrence visuelle avec la ligne qui les porte. */ .sv-enf{list-style:none;margin:0;padding:0 20px 10px 20px} .sv-enf li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; padding:3px 0 3px 16px;font-size:12.5px;color:var(--ink-2); border-left:2px solid var(--line);margin-left:2px} .sv-enf li.sv-sous{padding-left:32px;color:var(--muted)} .sv-quoi{font-size:11px;color:var(--muted);min-width:66px} .sv-d{color:var(--muted)} .sv-m{font-variant-numeric:tabular-nums} /* La carte des estimés, à part : le bouton « au panier » est l'action la plus directe de l'écran, il porte donc la couleur d'action plutôt qu'un lien. */ .sv-estimes{margin-bottom:18px} .sv-estimes .suivi-tete{padding:16px 20px 10px} .sv-reprendre{padding:6px 14px;font-size:13px;margin-left:8px} .sv-est .sv-act{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap} /* L'invitation de la page Contact : elle doit se lire, pas se remplir d'encre. Un filet orange à gauche suffit à la distinguer du formulaire. */ /* ═══ La barre d'emprunt d'identité reste à l'écran ═══ 🚨 Mesuré le 2026-08-29 : après 700 px de défilement elle était à y = −367, donc perdue. Or c'est la SEULE chose qui dit à l'employé qu'il agit sous l'identité d'un client, et elle porte le bouton pour en sortir. ⚠️ Le menu latéral est lui aussi collant : sans le décaler de la hauteur de la barre, il laissait une bande vide en haut (visible sur la capture). */ .imp-bar{position:sticky;top:0;z-index:60} body.avec-emprunt .sidebar{top:var(--imp-h,46px);height:calc(100vh - var(--imp-h,46px))} /* Les trois sections de l'onglet « en cours ». Un filet, un mot, un compte : assez pour séparer, pas assez pour peser. */ .sv-sect{display:flex;align-items:center;gap:8px;margin:0;padding:14px 20px 6px; font-size:11.5px;font-weight:700;color:var(--muted);border-top:1px solid var(--line)} .sv-sect:first-of-type{border-top:0} .sv-sect .sv-n{font-size:10.5px;font-weight:700;color:var(--muted); background:var(--bg-soft);border-radius:999px;padding:1px 7px} /* ⚠️ Seule la section « à votre attention » porte une couleur : si les trois en avaient une, aucune ne se remarquerait. */ .sv-sect.att{color:var(--warn-ink)} .sv-sect.att .sv-n{background:var(--warn-bg);color:var(--warn-ink)} /* ⚠️ Sur l'onglet « en cours », les colonnes ne portent plus des dates mais un ÉTAT : un crochet vert, ou un point discret. On suit ce qui reste à faire, pas quand ça a été fait — et la date reste en infobulle. */ .sv-ok{color:var(--ok);font-size:16px;font-weight:700;line-height:1;cursor:default} .sv-non{color:var(--line-strong);font-size:16px;line-height:1} .sv-cours .sv-dt{font-variant-numeric:normal} /* Une ligne « en cours » respire un peu plus : c'est celle qu'on lit tous les jours. */ .sv-cours{padding-top:13px;padding-bottom:13px} /* L'état, en un mot. */ .sv-p{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px; border-radius:999px;margin-left:6px;vertical-align:middle;white-space:nowrap} .sv-p.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)} .sv-p.exp{background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-line)} .sv-p.att{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)} .sv-p.no{background:var(--err-bg);color:var(--err);border:1px solid var(--err-line)} /* Sur téléphone la grille se replie : chaque valeur reprend son étiquette, sinon une colonne de dates sans en-tête ne veut plus rien dire. */ @media (max-width:760px){ .sv-th{display:none} /* ⚠️ Chaque grille est nommée ICI une seule fois, et `.sv-est` n'est PAS dans le repli à deux colonnes : il a le sien, plus bas. Deux règles à sélecteurs égaux (0,2,0) se départageraient à l'ordre du fichier, et une feuille de 1 500 lignes cache l'ordre (GOTCHAS b2b #92). */ .sv-l.sv-cmd,.sv-l.sv-ret,.sv-l.sv-pay{grid-template-columns:1fr 1fr;gap:4px 12px;padding:12px 16px} .sv-no{grid-column:1 / -1;font-size:14.5px} .sv-tot{grid-column:1 / -1;text-align:left} /* ═══ L'ESTIMÉ EN TROIS RANGÉES ═══ Mesuré le 2026-08-29 : la ligne faisait 191 px au téléphone — cinq rangées empilées, parce que la grille de bureau se replie en deux colonnes et que chaque valeur reprend son étiquette AU-DESSUS d'elle. EST211 1 280,02 $ PO client 18664 · 31 juil. 2026 Ouvrir [ Au panier ] ⚠️ Le montant perd son étiquette ICI, et c'est voulu : il n'en avait besoin que parce qu'il était seul sur sa ligne. Posé à droite du numéro, en gras, il se lit comme sur un reçu. La date perd la sienne pour la même raison — dans « PO client 18664 · 31 juil. 2026 », une date ne peut pas être autre chose. Le PO garde la sienne : « 18664 » seul ne dit rien. ⚠️ Ne touche QUE `.sv-est`. Les lignes de commandes portent bien plus de champs (état, expédiée, payée, factures dépliables) : les tasser pareil les rendrait illisibles. */ .sv-l.sv-est{grid-template-columns:minmax(0,1fr) auto;gap:1px 10px;padding:11px 16px} .sv-est .sv-no{grid-column:1;grid-row:1;font-size:14.5px} .sv-est .sv-tot{grid-column:2;grid-row:1;text-align:right;font-size:14.5px} .sv-est .sv-tot[data-lib]::before{display:none} .sv-est .sv-po{grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sv-est .sv-dt{grid-column:2;grid-row:2;font-size:12.5px;color:var(--muted);text-align:right} .sv-est .sv-dt[data-lib]::before{display:none} .sv-est .sv-po[data-lib]::before{display:inline;margin:0 5px 0 0} .sv-est .sv-act{grid-column:1 / -1;grid-row:3;justify-content:flex-start;gap:10px; margin-top:7px;padding-top:0;border-top:0} .sv-est .sv-act .linkbtn{padding:8px 2px;font-size:14px} .sv-est .sv-act .btn{padding:8px 14px} .sv-enf{padding:0 16px 10px} .sv-dt:empty{display:none} /* ⚠️ L'en-tête de grille est masqué ici : sans son étiquette, « 18628 » ou « 20 août » ne se rattache plus à rien. Chaque valeur reprend donc la sienne, au-dessus, en petit. */ .sv-l [data-lib]::before{content:attr(data-lib);display:block;font-size:10.5px; color:var(--muted);font-weight:600;margin-bottom:1px} } /* ═══ CHARTE 2026 : les titres ═══ Montserrat sur les titres seulement ; le corps de texte reste sur la pile systeme, qui est la plus lisible a petite taille et ne coute aucun octet. ⚠️ `font-display:swap` cote Google Fonts : si la police tarde ou ne vient jamais, le texte s'affiche quand meme dans la pile de repli. */ h1, h2, h3, h4, .page-title, .stat-v, .co-h-n, .st-tete h2, .modal-head h2, .brand-mot { font-family: var(--police-titre); letter-spacing: -.01em; } /* Le bouton plein : sa couleur de texte suit desormais le jeton. */ .btn-primary:hover { background: var(--brand-dark); } /* Le bouton d exportation, a cote du compte de resultats : une sortie, pas une action principale. */ .btn-export{margin-left:12px;padding:4px 12px;font-size:12.5px;vertical-align:middle} /* ═══ LA COLONNE DU PANIER : UN SEUL RETRAIT, UN SEUL RYTHME ══════════════ Signale par Max le 2026-08-30, capture a l'appui. Mesure avant correction, x du TEXTE (pas de la boite : un ` qui porte le retrait, pas la cellule. Sans cette reprise les deux s'ADDITIONNENT. */ @media (max-width: 720px) { /* ⚠️ En `>` pour la meme raison : le tableau imbrique des applications ne doit pas heriter du retrait des lignes du panier. */ .cart-tbl > tbody > tr, .cart-tbl > tfoot > tr { padding-left: var(--pad-x); padding-right: var(--pad-x); } .cart-card > .tbl > tbody > tr > td, .cart-card > .tbl > tfoot > tr > td { padding-left: 0; padding-right: 0; } .cart-tbl > tbody > tr > td:first-child { padding-right: 34px; } /* place du bouton X */ .cart-tbl > tbody > tr > td.cell-remove { padding: 0; } } /* Le rythme vertical, lui aussi unique : 18 px, celui de `.card-flux`. Les cartes nues n'avaient AUCUNE marge — d'ou les 0 px. */ .cart-card, #hsBloc, #pcBloc, .co-sum, .cart-actions { margin-bottom: 18px; } .dt { margin-bottom: 18px; } /* ═══ LA LIGNE DU PANIER PORTE LA FICHE DE LA PIECE ═══════════════════════ Max, 2026-09-01 : « un visuel plus semblable a quand on cherche des items ». La photo, les pastilles et le depliant reutilisent les classes de la recherche (`.row-photo`, `.at-badge`, `.row-detail`, `.fits-table`) : il n'y a ici que la mise en colonne, et le retrecissement au telephone. */ .ligne-piece { display: flex; gap: 14px; align-items: flex-start; } .ligne-piece-txt { min-width: 0; flex: 1 1 auto; } .ligne-desc { color: var(--muted); font-size: 12px; margin-top: 2px; } .cart-tbl .row-photo { flex: 0 0 auto; } /* 🚨 La carte du panier est en `overflow:auto` : une colonne « Article » qui grossit ne deborde pas, elle POUSSE Qte / Prix / Total hors de l'ecran, avec une barre de defilement horizontale. Mesure du 2026-09-01 : avec la photo et la description, les quatre autres colonnes n'etaient plus visibles a 1240 px. On borne donc la premiere colonne et on laisse le texte se couper. */ /* ⚠️ `> tbody >` / `> thead >` OBLIGATOIRE : le tableau des applications est IMBRIQUE dans la premiere cellule, donc `.cart-tbl th` l'attrapait aussi et donnait 56 % a sa colonne « Marque ». Mesure du 2026-09-01 : un `document.querySelectorAll('.cart-tbl thead th')` rendait 23 en-tetes pour un tableau qui en a 5. */ /* 🚨 SEULEMENT AU-DESSUS DE 720 px. Sous cette largeur le tableau s'empile et chaque cellule doit prendre TOUTE la carte ; ce `56 %` la contredisait avec une specificite plus forte. Mesure du 2026-09-01 sur un telephone de 412 px : la cellule tombait a 196 px et la colonne de texte a **54 px** — le numero de piece se coupait en deux (« HD11-088- / A0 ») et la description sortait a deux mots par ligne. Signale par Max, capture a l'appui. */ @media (min-width: 721px) { .cart-tbl > thead > tr > th:first-child, .cart-tbl > tbody > tr:not(.ligne-detail) > td:first-child { width: 56%; } } /* La ligne de detail occupe toute la largeur et ne participe pas au calcul des colonnes. Son tableau defile horizontalement plutot que de pousser. */ .cart-tbl > tbody > tr.ligne-detail > td { padding-top: 0; border-top: 0; } .cart-tbl .fits-wrap { overflow-x: auto; } .ligne-desc, .ligne-piece-txt > b { overflow-wrap: anywhere; } /* 🚨 ENTRE 900 ET 1120 px, la barre laterale prend 240 px et il ne reste que 728 px de carte : mesure du 2026-09-01 a 1024 px, le tableau demandait 751 px, donc 23 px de trop et une barre de defilement. La vignette est ce qu'on peut reduire sans rien perdre — le texte, lui, etait deja a sa largeur minimale (106 px). */ /* ⚠️ LES MEMES VALEURS QUE LA RECHERCHE, et ce n'est pas un detail de gout : Max a demande « un visuel plus semblable a quand on cherche des items ». La recherche passe sa vignette a 96 px avec 12 px d'ecart sous 900 px (`.item-row{grid-template-columns:96px 1fr;gap:12px}`). Deux valeurs differentes pour la meme vignette, ce sont deux ecrans qui se ressemblent presque — le pire des trois etats. */ @media (max-width: 1120px) { .cart-tbl .row-photo { width: 96px; height: 74px; } .ligne-piece { gap: 12px; } } /* ═══ §119 · L'AIDE REPLIEE DERRIERE UN « ? » ══════════════════════════════ Demande de Max, 2026-09-02 : « dans l'admin, met moins de texte inutile... ou deplace-le dans des boites fermees, ou icone de point d'interrogation ». ⚠️
, PAS un tooltip en JavaScript : ca s'ouvre au clavier, ca reste ouvert pendant qu'on lit le tableau a cote, ca s'imprime, et ca survit a un script casse plus haut dans la page — ce qui est arrive le 2026-09-01 et avait emporte tout ce qui suivait dans le fichier. ⚠️ Le panneau fixe sa taille, sa graisse et sa couleur : il vit DANS un titre (h1/h2), donc il heriterait sinon d'un 20 px gras. ⚠️ Il garde le liseré bleu de `.act-avert` : c'est la meme chose qu'avant, rangee — pas un nouveau genre de message a apprendre. */ .aide { display:inline-block; vertical-align:middle; margin-left:8px; position:relative } .aide > summary { list-style:none; cursor:pointer; width:20px; height:20px; border-radius:50%; border:1px solid var(--line-strong, var(--line)); background:var(--bg-soft); color:var(--muted); font-size:12px; font-weight:700; line-height:18px; text-align:center; user-select:none; } .aide > summary::-webkit-details-marker { display:none } .aide > summary::marker { content:'' } .aide > summary:hover { color:var(--ink); border-color:var(--brand) } .aide > summary:focus-visible { outline:2px solid var(--ring); outline-offset:2px } .aide[open] > summary { background:var(--brand); color:#1b1b1b; border-color:var(--brand) } .aide-corps { position:absolute; z-index:40; top:27px; left:0; width:min(560px, 86vw); background:var(--card); border:1px solid var(--line); border-left:3px solid #2b5a9b; border-radius:8px; padding:12px 14px; box-shadow:var(--shadow); font-size:13px; font-weight:400; line-height:1.55; color:var(--ink); text-align:left; white-space:normal; } /* Sous 720 px, un panneau ancre au « ? » sort de l'ecran : MESURE du 2026-09-02, x = -30 px sur un ecran de 390 px, texte coupe a gauche — et la page ne defile meme pas horizontalement, donc rien ne le rattrape. On le detache donc du titre et on le pose en bas de l'ecran, comme une feuille. ⚠️ `bottom:88px` degage la bulle du clavardage (52 px de haut, `.clav{bottom:18px}`) : sinon elle se pose dessus, et elle est au-dessus (z-index 900). */ @media (max-width: 720px) { .aide-corps { position:fixed; left:12px; right:12px; bottom:88px; top:auto; width:auto; max-height:56vh; overflow-y:auto; z-index:940; } } /* ═══ §121 · « X s'occupe de votre demande » ═══════════════════════════════ Un ETAT, affiche entre l'en-tete du clavardage et le fil. Pas un message : dans le fil il se ferait passer pour une reponse, a l'oeil comme dans les compteurs (delai de premiere reponse, pastille « sans reponse »). */ .clav-pris { margin:0 12px 8px; padding:7px 10px; border-radius:8px; background:var(--ok-bg); color:var(--ok-ink); border:1px solid var(--ok-line); font-size:12.5px; line-height:1.4; } /* ═══ §122 · TERMINER SA CONVERSATION, ET LA NOTER ════════════════════════ Demande de Max, 2026-09-02 : « trois petits points avec lien pour fermer, 5 etoiles, pas obligatoire ». */ .clav-menu { position:relative; margin-left:auto } .clav-pts { background:none; border:0; color:inherit; opacity:.7; cursor:pointer; font-size:19px; line-height:1; padding:2px 8px; border-radius:6px } .clav-pts:hover { opacity:1; background:rgba(127,127,127,.16) } .clav-menu-liste { position:absolute; right:0; top:26px; z-index:40; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:4px; text-align:left } .clav-menu-liste button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--ink); font-size:13px; padding:8px 10px; border-radius:6px; cursor:pointer } .clav-menu-liste button:hover { background:var(--bg-soft) } .clav-bilan { margin:0 12px 8px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg-soft) } .clav-bilan b { font-size:13.5px } .clav-bilan p { margin:2px 0 8px; font-size:12px; color:var(--muted) } .clav-bilan textarea { width:100%; box-sizing:border-box; font:inherit; font-size:13px; padding:7px 9px; border-radius:7px; border:1px solid var(--line); background:var(--card); color:var(--ink); resize:vertical } .clav-bilan-act { display:flex; gap:8px; justify-content:flex-end; margin-top:8px } .clav-bilan-err { margin:8px 0 0; font-size:12px; color:var(--danger,#dc2626) } /* ⚠️ Les etoiles sont des BOUTONS, pas des caracteres cliquables : au clavier on doit pouvoir les atteindre, et un lecteur d'ecran doit pouvoir les annoncer. */ .clav-etoiles { display:flex; align-items:center; gap:2px; margin-bottom:8px } .clav-etoiles button { background:none; border:0; cursor:pointer; font-size:22px; line-height:1; padding:0 2px; color:var(--line-strong,var(--line)) } .clav-etoiles button.on { color:var(--accent,#e8951f) } .clav-etoiles button:focus-visible { outline:2px solid var(--ring); outline-offset:2px; border-radius:4px } .clav-etoiles-x { margin-left:8px; font-size:11.5px; color:var(--muted); cursor:pointer; text-decoration:underline } /* La satisfaction dans la liste de l'admin. */ .sat-etoiles { color:var(--accent,#e8951f); letter-spacing:1px; white-space:nowrap } .sat-com { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; max-width:260px; white-space:normal } /* ═══ §124 · LES CAPACITÉS VERROUILLÉES PAR LE SUPER-ADMIN ═════════════════ Signalé par Max le 2026-09-02 : « quand je coche super-admin, je peux quand même cocher/décocher d'autres cases ». Le bloc était grisé à 45 % et restait cliquable ET envoyé : il disait « désactivé » en décidant encore. Le verrou est maintenant réel (`disabled`, et le serveur n'écrit pas). Ce qui suit ne fait que le rendre lisible : le curseur dit non avant le clic. */ .perms-verrou .check { cursor:not-allowed; opacity:.7 } .perms-verrou input[type=checkbox] { cursor:not-allowed } /* ═══ §125 · LA PASTILLE DU PANIER, AU MENU ════════════════════════════════ Demande de Max, 2026-09-02 : « pour le panier je veux une pastille avec le nombre d'items actuellement au panier ». ⚠️ Elle n'est PAS rouge. Le rouge de `.side-pastille` dit « des clients attendent une réponse » — une alerte. Un panier qui contient trois pièces n'alerte de rien : c'est de l'information, donc la couleur de la marque. ⚠️ `[hidden]` doit gagner sur le `display:inline-flex` de `.side-pastille`, sinon un panier vide affiche une pastille à zéro. */ /* ⚠️ L'encre est POSÉE, pas héritée de `--sur-marque` (l'encre des boutons). Mesuré le 2026-09-02 : dans la feuille classique, `--sur-marque` vaut BLANC, ce qui donne 2,66:1 sur l'orange — sous la barre AA (4,5:1). Passable sur un bouton de 15 px, pas sur 11 px gras dans une pastille de 19 px. Avec cette encre : 7,80:1 en charte 2026, 6,5:1 en classique. */ .side-pastille-neutre { background:var(--brand); color:#1c1a17 } .side-pastille[hidden] { display:none } /* ═══ §129 · CE QUE LE CLIENT NE VOIT PAS, DANS LA BARRE D'EMPRUNT ═════════ Demande de Max, 2026-09-02. Un vendeur qui lit un prix a l'ecran et l'annonce au telephone a quelqu'un qui n'a jamais pu le voir : la barre le dit avant que ca arrive. Deuxieme ligne, plus petite : l'identite du client reste ce qu'on lit en premier. */ .imp-cache { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; font-style:normal } .imp-cache-t { font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase } .imp-puce { display:inline-block; padding:2px 9px; border-radius:999px; background:#c0392b; color:#fff; font-size:12px; font-weight:600; line-height:1.6; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.3) } /* §130 — Le menu se lit en deux temps : ce que tout le monde voit, puis, sous un trait, ce qui appartient au personnel At-Pac. Demande de Max, 2026-09-03. ⚠️ `margin: 10px 12px` et pas `10px 0` : le trait doit s'arreter avant les bords, sinon il coupe le menu au lieu de le rythmer. */ .side-sep { height:1px; background:currentColor; opacity:.16; margin:10px 12px 6px; border:0 } /* §131 — « Se connecter comme » en haut de TOUTES les pages d'un employé. Demande de Max, 2026-09-03 : rendre la bascule vers un compte client aussi rapide que possible, au lieu de quatre boîtes disséminées. ⚠️ `position:sticky` et pas `fixed` : la barre appartient à la colonne de contenu, pas à la fenêtre. En `fixed` elle passerait AU-DESSUS du menu latéral ouvert au téléphone, et masquerait le premier lien. ⚠️ `top:0` suffit : cette barre ne s'affiche jamais en même temps que la barre d'emprunt (`.imp-bar`), qui n'existe que sous emprunt — et sous emprunt on ne montre pas ce champ. Les deux ne peuvent donc pas se superposer. ⚠️ La liste d'autocomplétion (`.imp-ac-liste`, z-index 60) doit rester AU-DESSUS de la barre : d'où le z-index 40 ici, et pas l'inverse. */ .imp-barre { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:9px 28px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap } .imp-barre form { display:flex; gap:8px; align-items:center; flex:1 1 auto; flex-wrap:wrap; margin:0 } .imp-barre label { font-size:13px; color:var(--muted); white-space:nowrap } .imp-barre .imp-ac { flex:1 1 240px; max-width:460px } .imp-barre .input { height:34px; padding:6px 10px } .imp-barre .btn { padding:7px 14px } .imp-barre .imp-err { flex:1 1 100%; margin:0 } .imp-barre .imp-choix { flex:1 1 100%; margin-top:6px } @media (max-width:900px) { .imp-barre { padding:8px 14px } } @media (max-width:600px) { .imp-barre label { flex:1 1 100% } .imp-barre .btn { flex:0 0 auto } } /* §132 — « Reprendre où j'en étais » : les derniers comptes ouverts par CET employé, cliquables d'un coup. Max, 2026-09-03. ⚠️ Chaque carte est un
` commence au bord de la carte, c'est son padding qui decale le texte) : Articles 283 px ecart au-dessus : — Vendre une piece inactive 293 px 0 px Votre n° de bon de commande 293 px 0 px Livraison / Facturation / Notes 285 px 18 / 10 / 10 px TROIS colonnes de texte — 283 / 285 / 293 — et les deux premieres cartes COLLEES a ce qu'il y a au-dessus pendant que les replis respirent. La cause : trois paddings horizontaux differents pour des boites qui se suivent dans la meme colonne — `.card` 24 px, `.tbl td` 14 px, `.dt>summary` 16 px. Chacun est defendable seul ; empiles, ils font un escalier. ⚠️ `.dt` et `.cart-card` ne servent QU'au panier (verifie : une seule vue les emploie). Les corriger ici ne deplace aucun autre ecran. ⚠️ On aligne sur 24 px, le padding des `.card`, parce que c'est la valeur de TOUTE l'application : c'est la table et les replis qui etaient les exceptions. */ /* UNE variable pour le retrait horizontal de la colonne du panier. Elle vaut ce que vaut le padding des `.card` : 24 px au bureau, 16 px sous 720 px. Ecrire 24 px en dur alignait le bureau ET cassait le telephone — mesure du 2026-08-30 : article 53 px, replis 39 px, cartes 31 px. */ :root { --pad-x: 24px; } @media (max-width: 720px) { :root { --pad-x: 16px; } } .cart-card .tbl th, .cart-card .tbl td { padding-left: var(--pad-x); padding-right: var(--pad-x); } .dt > summary { padding-left: var(--pad-x); padding-right: var(--pad-x); } /* Sous 720 px le tableau du panier s'empile : c'est le