:root{ --ink:#111; --muted:#8A8A8A; --line:#E9E9E7; --plate:#F5F5F4; }
*{ box-sizing:border-box; }
body{ margin:0; background:#fff; color:var(--ink); font-size:16px; line-height:1.5;
      font-family:'Jost','Futura','Century Gothic',system-ui,sans-serif; font-weight:300; }
.lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
h1{ font-size:32px; font-weight:300; letter-spacing:.16em; text-transform:uppercase; margin:0; }
header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
        gap:14px; padding:14px 30px; border-bottom:2px solid var(--ink); }
.brand{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.brand .logo{ height:26px; width:auto; display:block; flex:0 0 auto; }
.logostack{ width:152px; height:auto; display:block; margin:0 auto; }
nav{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
nav button{ background:none; border:none; padding:2px 0; cursor:pointer; font:inherit;
            font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
            border-bottom:1px solid transparent; }
nav button.on{ color:var(--ink); border-bottom-color:var(--ink); }
nav button .pip{ display:inline-block; min-width:16px; padding:0 4px; margin-left:6px;
                 background:var(--ink); color:#fff; border-radius:9px; font-size:10px;
                 letter-spacing:0; line-height:16px; text-align:center; }
main{ padding:32px 30px; max-width:1320px; margin:0 auto 90px; }
table{ width:100%; border-collapse:collapse; font-size:15px; }
thead th{ text-align:left; padding:0 10px 10px 0; font-size:11px; letter-spacing:.16em;
          text-transform:uppercase; color:var(--muted); font-weight:400; }
thead th.s{ cursor:pointer; user-select:none; }
thead th.s:hover{ color:var(--ink); }
thead tr{ border-bottom:1px solid var(--ink); }
tbody tr{ border-bottom:1px solid #F0F0EE; }
tbody td{ padding:11px 10px 11px 0; }
tbody tr.click:hover{ background:#FAFAF9; cursor:pointer; }
.num{ text-align:right; padding-right:0; }
.grid{ display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.plate{ aspect-ratio:3/4; background:var(--plate); position:relative; overflow:hidden; }
.plate i{ position:absolute; inset:18% 22%; border-radius:2px 2px 40% 40%/2px 2px 12% 12%; }
.plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.plate span{ position:absolute; left:10px; bottom:8px; font-size:11px; letter-spacing:.14em; color:#B4B4B0; }
.dot{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.14);
      padding:0; cursor:pointer; flex:0 0 auto; background:none; }
.dot.on{ outline:1px solid var(--ink); outline-offset:2px; }
.dot.light{ border-color:rgba(0,0,0,.28); }
.chip{ width:11px; height:11px; border-radius:50%; display:inline-block;
       border:1px solid rgba(0,0,0,.18); vertical-align:-1px; margin-right:7px; }
.thumb{ width:44px; height:58px; object-fit:contain; background:#fff; border:1px solid var(--line); display:block; }
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card{ text-align:left; background:none; border:none; padding:0; cursor:pointer; font:inherit; color:inherit; }
.sel{ outline:1px solid var(--ink); outline-offset:6px; }
input,button,select,textarea{ font-family:inherit; font-weight:300; }
.field{ width:100%; padding:11px 12px; border:1px solid var(--line); font-size:16px; background:#fff; }
.field:focus,.mini:focus,select:focus,textarea:focus{ outline:1px solid var(--ink); outline-offset:-1px; }
.mini{ width:104px; padding:7px 9px; border:1px solid var(--line); font-size:15px;
       text-align:right; background:#fff; }
select{ padding:7px 9px; border:1px solid var(--line); font-size:15px; background:#fff; max-width:200px; }
select.field{ max-width:none; padding:11px 12px; }
.caps{ text-transform:uppercase; letter-spacing:.06em; }
.cta{ border:1px solid var(--ink); background:var(--ink); color:#fff; font-size:13px;
      letter-spacing:.17em; text-transform:uppercase; padding:13px 21px; cursor:pointer; }
.ghost{ background:none; color:var(--ink); }
.small{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px;
        border:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer; }
.small.on{ background:var(--ink); color:#fff; }
.small[disabled]{ opacity:.3; cursor:default; }
.warn{ font-size:14px; color:#C8103C; }
.ok{ font-size:14px; color:var(--muted); }
.bar{ position:sticky; bottom:0; background:#fff; border-top:2px solid var(--ink);
      padding:15px 0; margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:11px; }
.center{ max-width:370px; margin:12vh auto; }
.mono{ font-variant-numeric:tabular-nums; }
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; }
textarea{ width:100%; min-height:190px; padding:12px; border:1px solid var(--line);
          font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.6; }
.empty{ color:var(--muted); font-size:16px; max-width:600px; margin-top:16px; }
.bad{ color:#C8103C; }
.search{ padding:9px 12px; border:1px solid var(--line); font-size:15px; min-width:230px; }
.form{ display:grid; gap:15px; grid-template-columns:1fr 1fr; }
.form .full{ grid-column:1 / -1; }
.sect{ border-top:1px solid var(--ink); padding-top:14px; margin-top:34px; }
.drop{ border:1px dashed var(--muted); padding:52px 24px; text-align:center;
       background:#FCFCFB; cursor:pointer; }
.drop.over{ border-color:var(--ink); background:#F5F5F4; }
.prog{ height:2px; background:var(--line); margin-top:18px; max-width:520px; }
.prog i{ display:block; height:2px; background:var(--ink); width:0; }
.tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px;
      border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.tag.on{ border-color:var(--ink); color:var(--ink); }
/* écran d'accueil */
.tiles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
        grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.tile{ background:#fff; border:none; text-align:left; cursor:pointer; font:inherit; color:inherit;
       padding:22px 22px 24px; display:flex; flex-direction:column; gap:6px; min-height:132px; }
.tile:hover{ background:#FAFAF9; }
.tile .t{ font-size:17px; letter-spacing:.12em; text-transform:uppercase; }
.tile .k{ font-size:26px; margin-top:auto; font-variant-numeric:tabular-nums; }
.tile .s{ font-size:13.5px; color:var(--muted); }
.tile .s b{ font-weight:400; color:var(--ink); }
.group{ margin-top:38px; }
.group > .lbl{ margin-bottom:12px; }
@media(max-width:700px){ .form{ grid-template-columns:1fr; } }
/* détail de commande : grille nuances × tailles */
table.gridq{ table-layout:fixed; min-width:520px; }
table.gridq col.cs{ width:74px; } table.gridq col.ct{ width:84px; }
table.gridq thead th.q{ text-align:center; padding:12px 0 8px; }
table.gridq thead th:first-child{ padding-top:12px; }
table.gridq td{ padding:7px 0; vertical-align:middle; }
table.gridq td.q{ text-align:center; font-variant-numeric:tabular-nums; font-size:16px;
                  border-left:1px solid #F0F0EE; }
table.gridq td.na{ background:repeating-linear-gradient(135deg,#FFFFFF 0 5px,#EDEDEA 5px 6px); }
table.gridq td.tot{ border-left:1px solid var(--ink); font-weight:400; }
table.gridq .z{ color:#C4C4C0; }
table.gridq .nu{ display:flex; align-items:center; gap:14px; }
table.gridq .thumb{ width:36px; height:47px; }
table.gridq tfoot tr{ border-top:1px solid var(--ink); }
table.gridq tfoot td{ padding:9px 0; }
table.gridq tfoot td.q{ border-left-color:transparent; }
table.gridq tfoot td.tot{ border-left:1px solid var(--ink); }
@media(max-width:700px){ table.gridq{ min-width:0; } table.gridq .thumb{ display:none; }
  table.gridq col.cs{ width:44px; } table.gridq col.ct{ width:52px; } table.gridq td.q{ font-size:15px; } }
/* édition de commande */
table.gridq input.qi{ width:100%; max-width:58px; padding:6px 2px; text-align:center; border:1px solid var(--line);
                      font-size:15px; font-variant-numeric:tabular-nums; background:#fff; }
table.gridq input.qi:focus{ outline:1px solid var(--ink); outline-offset:-1px; }
.rm{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:19px; line-height:1; padding:2px 6px; }
.rm:hover{ color:#C8103C; }
/* bandeau noir : accès rapide à l'espace agent 10/01 */
.topbar{ background:var(--ink); color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
         padding:9px 30px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:700px){ .topbar{ padding:9px 16px; } }
/* ---- document imprimable : récapitulatif de commande envoyé au client ---- */
#printdoc{ display:none; }
@media print{
  .topbar, header, .noprint{ display:none !important; }
  main{ padding:0; margin:0; max-width:none; }
  body{ font-size:11pt; }
  #printdoc{ display:block; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .pdtop{ display:flex; align-items:center; gap:10px; border-bottom:2px solid var(--ink);
          padding-bottom:9px; margin-bottom:17px; }
  .pdlogo{ display:block; }
  .pdlogo .logo{ height:20px; width:auto; display:block; }
  .pdname{ margin-left:auto; font-size:9pt; letter-spacing:.18em; text-transform:uppercase; }
  .pdmeta{ display:flex; gap:26px; margin-bottom:15px; font-size:10pt; line-height:1.45; }
  .pdmeta > div{ flex:1; }
  .pdl{ display:block; font-size:8pt; letter-spacing:.16em; text-transform:uppercase;
        color:var(--muted); margin-bottom:3px; }
  .pdpiece{ margin-top:15px; break-inside:avoid; page-break-inside:avoid; }
  .pdph{ display:flex; justify-content:space-between; gap:12px; font-size:10.5pt;
         border-bottom:1px solid var(--ink); padding-bottom:5px; }
  .pdt{ width:100%; border-collapse:collapse; font-size:10pt; font-variant-numeric:tabular-nums; }
  .pdt th{ text-align:center; font-size:8pt; letter-spacing:.14em; text-transform:uppercase;
           color:var(--muted); font-weight:400; padding:6px 0 4px; }
  .pdt th:first-child{ text-align:left; }
  .pdt td{ text-align:center; padding:4px 0; border-bottom:1px solid #EFEFED; }
  .pdt td.pdsh{ text-align:left; }
  .pdshin{ display:flex; align-items:center; gap:9px; }
  .pdshin img{ width:26px; height:34px; object-fit:contain; }
  .pdt td.pdtot{ border-left:1px solid var(--ink); }
  .pdsum{ display:flex; justify-content:space-between; border-top:2px solid var(--ink);
          margin-top:17px; padding-top:9px; font-size:13pt; font-variant-numeric:tabular-nums; }
  .pdfoot{ margin-top:16px; font-size:8.5pt; color:var(--muted); line-height:1.55; }
  @page{ size:A4; margin:14mm 12mm; }
}

/* tiroir de detail des statistiques */
tbody tr.click td:first-child{ position:relative; }
.scrim{ position:fixed; inset:0; background:rgba(17,17,17,.13); z-index:59; }
.drawer{ position:fixed; top:0; right:0; width:min(520px,94vw); height:100%; background:#fff;
         border-left:2px solid var(--ink); box-shadow:-20px 0 46px rgba(0,0,0,.09);
         overflow-y:auto; padding:24px 26px 70px; z-index:60; }
.drawer .x{ position:absolute; top:12px; right:16px; border:none; background:none;
            font-size:26px; line-height:1; cursor:pointer; color:var(--muted); padding:4px 8px; }
.drawer .x:hover{ color:var(--ink); }
.drawer h2{ font-size:21px; font-weight:300; letter-spacing:.11em; text-transform:uppercase;
            margin:6px 30px 0 0; }
.drawer .grp{ border-top:1px solid #F0F0EE; padding:13px 0 11px; }
.drawer .grp:first-of-type{ border-top:1px solid var(--ink); }
.drawer .gh{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; font-size:15px; }
.drawer .gh b{ font-weight:400; }
.drawer .ln{ display:flex; justify-content:space-between; gap:14px; font-size:14px;
             color:var(--muted); padding:2px 0; }
@media print{ .scrim,.drawer{ display:none; } }