: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:30px; 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 28px; border-bottom:2px solid var(--ink);
        position:sticky; top:0; background:#fff; z-index:5; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .logo{ height:26px; width:auto; display:block; flex:0 0 auto; }
main{ padding:0 28px 150px; max-width:1240px; margin:0 auto; }
.cover{ width:100%; max-height:360px; object-fit:cover; display:block; margin-bottom:34px; }
.row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dot{ width:17px; height:17px; border-radius:50%; border:1px solid rgba(0,0,0,.14);
      padding:0; cursor:pointer; background:none; flex:0 0 auto; position:relative; }
.dot.on{ outline:1px solid var(--ink); outline-offset:2px; }
.dot.light{ border-color:rgba(0,0,0,.3); }
.dot.filled::after{ content:''; position:absolute; left:50%; top:50%; width:5px; height:5px;
                    margin:-2.5px 0 0 -2.5px; border-radius:50%; background:rgba(0,0,0,.6); }
.grid{ display:grid; gap:30px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.plate{ aspect-ratio:3/4; background:var(--plate); position:relative; overflow:hidden; }
.plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.name{ font-size:17px; letter-spacing:.11em; text-transform:uppercase; margin-top:6px; }
.sizes{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.sz{ flex:1 1 0; min-width:52px; text-align:center; }
.sz label{ display:block; font-size:10px; letter-spacing:.14em; color:var(--muted);
           text-transform:uppercase; margin-bottom:3px; }
/* Le trait doit se voir : a #E9E9E7 sur blanc, l'acheteur perdait la ligne
   de saisie du regard. Bord plus soutenu, fond legerement creuse. */
.sz input{ width:100%; padding:7px 4px; border:1px solid #C4C4BE; text-align:center;
           font-size:16px; font-family:inherit; font-weight:300; background:#FAFAF8; }
.sz input:hover{ border-color:#9A9A93; }
.sz input:focus{ outline:1px solid var(--ink); outline-offset:-1px; background:#fff; }
.sz input.has{ border-color:var(--ink); background:#fff; font-weight:400; }
.warnline{ font-size:13px; color:#C8103C; margin-top:7px; min-height:18px; }
.foot{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:2px solid var(--ink);
       padding:13px 28px; display:flex; flex-wrap:wrap; gap:16px; align-items:center;
       justify-content:space-between; z-index:6; }
.cta{ border:1px solid var(--ink); background:var(--ink); color:#fff; font-size:13px;
      letter-spacing:.17em; text-transform:uppercase; padding:13px 24px; cursor:pointer; }
.cta[disabled]{ opacity:.35; cursor:default; }
.ghost{ background:none; color:var(--ink); }
.mono{ font-variant-numeric:tabular-nums; }
.center{ max-width:620px; margin:12vh auto; text-align:center; padding:0 24px; }
.note{ color:var(--muted); font-size:14px; }
.sect{ border-top:1px solid var(--ink); padding-top:14px; margin:38px 0 22px; }
.colorama{ display:grid; gap:18px 14px;
           grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); align-items:start; }
.sw{ background:none; border:none; padding:0; cursor:pointer; font:inherit; text-align:center;
     display:flex; flex-direction:column; align-items:stretch; }
.sw i{ display:block; height:62px; border:1px solid rgba(0,0,0,.12); position:relative; }
.sw.on i{ outline:1px solid var(--ink); outline-offset:3px; }
.sw.filled i{ border-color:rgba(0,0,0,.24); }
.sw i .swq{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
            display:block; min-width:27px; height:27px; padding:0 7px; border-radius:14px;
            background:#fff; border:1px solid rgba(0,0,0,.2); color:var(--ink);
            font-size:12.5px; font-weight:400; font-style:normal; line-height:25px;
            letter-spacing:.02em; text-align:center; }
.sw span{ display:block; font-size:10.5px; letter-spacing:.09em; margin-top:8px;
          text-transform:uppercase; color:var(--muted); line-height:1.35; }
.sw.on span{ color:var(--ink); }
.sw.filled span{ color:var(--ink); }
.form{ display:grid; gap:15px; grid-template-columns:1fr 1fr; max-width:780px; }
.form .full{ grid-column:1 / -1; }
.field{ width:100%; padding:11px 12px; border:1px solid var(--line); font-size:16px;
        background:#fff; font-family:inherit; font-weight:300; }
.field:focus{ outline:1px solid var(--ink); outline-offset:-1px; }
.field.miss{ border-color:#C8103C; }
table{ width:100%; border-collapse:collapse; font-size:15px; }
tbody tr{ border-bottom:1px solid #F0F0EE; }
tbody td{ padding:9px 10px 9px 0; }
.num{ text-align:right; padding-right:0; }
.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; }
@media(max-width:600px){ main{ padding:0 16px 150px; } header{ padding:12px 16px; }
  .foot{ padding:12px 16px; } .form{ grid-template-columns:1fr; } }
/* ---- recapitulatif imprimable de la selection ---- */
#printdoc{ display:none; }
@media print{
  .agentbar, header, .foot, main{ display:none !important; }
  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 .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; }
}
/* espace agent */
.agentbar{ background:var(--ink); color:#fff; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
           padding:8px 28px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.agentbar a{ color:#fff; }
.btn-s{ font-family:inherit; font-weight:300; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
        padding:8px 12px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; white-space:nowrap; }
.btn-s.ghost{ background:none; color:var(--ink); }
.btn-s[disabled]{ opacity:.4; cursor:default; }
.tag{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line);
      color:var(--muted); padding:2px 7px; margin-left:6px; vertical-align:2px; white-space:nowrap; }
.flash{ margin:18px 0 0; padding:10px 14px; background:#F5F5F4; font-size:14px; word-break:break-all; }
.scroll{ overflow-x:auto; }
tr.click{ cursor:pointer; } tr.click:hover{ background:#FAFAF9; }
@media(max-width:600px){ .agentbar{ padding:8px 16px; } }
.nowrap{ white-space:nowrap; }

/* parcours en trois temps : line sheet, selection, send */
.steps{ display:flex; gap:16px; font-size:10.5px; letter-spacing:.16em;
        text-transform:uppercase; color:#C2C2BC; white-space:nowrap; }
.steps .on{ color:var(--ink); }
/* SELECTION : meme grille que la fiche commande de 10/01 OS */
.rcp{ margin-top:34px; }
.rch{ display:flex; justify-content:space-between; gap:14px; align-items:baseline;
      font-size:16px; padding-bottom:9px; }
table.gridq{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:560px; font-size:15px; }
table.gridq col.cs{ width:74px; } table.gridq col.ct{ width:84px; }
table.gridq thead tr{ border-bottom:1px solid var(--ink); }
table.gridq th{ text-align:left; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
                color:var(--muted); font-weight:400; padding:0 0 8px; }
table.gridq th.q{ text-align:center; }
table.gridq td{ padding:7px 0; vertical-align:middle; border-bottom:1px solid #F2F2F0; }
table.gridq td.q{ text-align:center; border-left:1px solid #F2F2F0; }
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-variant-numeric:tabular-nums; }
table.gridq .nu{ display:flex; align-items:center; gap:14px; }
table.gridq .thumb{ width:36px; height:47px; object-fit:contain; background:#fff;
                    border:1px solid var(--line); display:block; flex:0 0 auto; }
table.gridq tfoot tr{ border-top:1px solid var(--ink); }
table.gridq tfoot td{ padding:9px 0; border-bottom:none; }
table.gridq tfoot td.q{ border-left-color:transparent; }
table.gridq tfoot td.tot{ border-left:1px solid var(--ink); }
.low{ font-size:12px; color:#C8103C; margin-left:10px; }
input.rq{ width:52px; padding:6px 2px; text-align:center; border:1px solid #C4C4BE;
          background:#FAFAF8; font-family:inherit; font-weight:300; font-size:15px; }
input.rq:focus{ outline:1px solid var(--ink); outline-offset:-1px; background:#fff; }
input.rq.has{ border-color:var(--ink); background:#fff; font-weight:400; }
@media(max-width:700px){ .steps{ display:none; }
  table.gridq .thumb{ display:none; }
  table.gridq col.cs{ width:52px; } table.gridq col.ct{ width:58px; }
  input.rq{ width:42px; } }