/* 75-activite-commandes — 02/10/2026
   Retour du user : « L'écran Activité est mal présenté, beaucoup d'espace non
   utilisé. Pareil dans Commande, il y a des ronds vides, on dirait qu'on doit
   appuyer dessus alors que non. »
   1. Activité : gestes du dépôt, chiffres réels, journal en colonnes, classements.
   2. Le suivi d'une demande : une frise qui se lit comme un état, pas des boutons.
   3. Commandes du responsable : chiffres du jour, ligne plus riche, détail plus large.
   4. Commandes du dépôt : cartes en grille, articles en tableau, états explicites. */

/* ═══ 1. ACTIVITÉ ═══════════════════════════════════════════════════════════ */
#act2.a3{display:flex;flex-direction:column;gap:14px;font-family:'Outfit',sans-serif;color:var(--tx)}
#t-act #pa{padding:0}
.a3-salut{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 2px -2px}
.a3-salut h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.a3-date{display:inline-block;font:600 12px 'JetBrains Mono',monospace;color:var(--mu);letter-spacing:.03em}
.a3-date::first-letter{text-transform:uppercase}

.a3-gestes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.a3-geste{--g:#16a34a;display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border-radius:16px;
  border:1px solid var(--brd);background:var(--s1);color:var(--tx);cursor:pointer;text-align:left;font-family:inherit;
  box-shadow:inset 4px 0 0 var(--g),0 1px 2px rgba(12,18,32,.05),0 6px 18px rgba(12,18,32,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
.a3-geste.s{--g:#f97316}
.a3-geste:hover{border-color:var(--g);transform:translateY(-1px)}
.a3-geste:active{transform:scale(.99)}
.a3-geste-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--g);color:#fff}
.a3-geste-ic svg{stroke:currentColor}
.a3-geste-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a3-geste-t b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.a3-geste-t small{font-size:12.5px;color:var(--mu);font-weight:500}
.a3-geste-fl{flex:none;display:grid;place-items:center;color:var(--mu)}
.a3-geste-fl svg{stroke:currentColor}

.a3-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.a3-kpis-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.a3-kpi{--k:#f97316;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--s1);border:1px solid var(--brd);
  box-shadow:0 1px 2px rgba(12,18,32,.04),0 6px 18px rgba(12,18,32,.04);cursor:default;min-width:0}
.a3-kpi.s{--k:#f97316}.a3-kpi.e{--k:#16a34a}.a3-kpi.bl{--k:#2563eb}.a3-kpi.or{--k:#f97316}
.a3-kpi-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 13%,transparent);color:var(--k)}
.a3-kpi-ic svg{stroke:currentColor}
.a3-kpi-c{min-width:0;display:flex;flex-direction:column;gap:1px}
.a3-kpi-n{font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tx)}
.a3-kpi-l{font-size:12.5px;font-weight:700;color:var(--tx2,var(--tx));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a3-kpi-s{font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a3-kpi-s b{color:var(--tx);font-weight:700}

.a3-corps{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.a3-cote{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px}
.a3-carte{background:var(--s1);border:1px solid var(--brd);border-radius:18px;padding:16px 18px;min-width:0;
  box-shadow:0 1px 2px rgba(12,18,32,.04),0 8px 24px rgba(12,18,32,.05)}
.a3-carte-t{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.a3-carte-tt{min-width:0;flex:1 1 260px}
.a3-carte-t h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--tx)}
.a3-carte-t .act2-expl{margin:3px 0 0;font-size:12.5px;color:var(--mu)}
.a3-per{font:600 10.5px 'JetBrains Mono',monospace;color:var(--mu);letter-spacing:.05em;text-transform:uppercase;padding-top:4px}
.a3-cherche{flex:0 1 300px;min-width:220px}
.a3-filtres{margin:0 0 10px;padding:2px 0}

/* Le journal, en colonnes */
.a3 .a3-cols,.a3 .a3-l{display:grid;grid-template-columns:50px 32px minmax(0,2.3fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;column-gap:12px;align-items:center}
.a3-cols{padding:6px 12px 8px;border-bottom:1px solid var(--brd);font:600 10.5px 'JetBrains Mono',monospace;color:var(--mu);letter-spacing:.06em;text-transform:uppercase}
.a3 .a3-liste{display:flex;flex-direction:column;gap:0}
#act2 .a3-l{width:100%;min-height:52px;padding:8px 12px;margin:0;border:0 !important;border-bottom:1px solid var(--brd) !important;border-radius:0;
  background:transparent !important;color:var(--tx) !important;text-align:left;font-family:inherit;box-shadow:none !important;cursor:pointer;transition:background .12s}
#act2 .a3-l:hover{background:var(--s2) !important}
#act2 .a3-l[disabled]{cursor:default;opacity:1}
#act2 .a3-l.mvt-liv{cursor:default}
.a3-meta{display:contents}
.a3-h{font:600 12.5px 'JetBrains Mono',monospace;color:var(--tx2,var(--tx));font-variant-numeric:tabular-nums}
.a3-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.a3-ic svg{stroke:currentColor}
.a3-ic.e{background:rgba(22,163,74,.13);color:#16a34a}
.a3-ic.s{background:rgba(249,115,22,.14);color:#f97316}
.a3-ic.liv{background:rgba(37,99,235,.13);color:#2563eb}
.a3-art{min-width:0;display:flex;flex-direction:column;gap:1px}
.a3-art-t{display:flex;align-items:baseline;gap:8px;min-width:0}
.a3-art-t b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.a3-q{flex:none;font-style:normal;font-size:13.5px;font-weight:800;color:#2563eb;font-variant-numeric:tabular-nums}
.a3-sens{font-size:11.5px;color:var(--mu);font-weight:500}
.a3-ch{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.a3-p{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:600}
.a3-p i{flex:none;width:8px;height:8px;border-radius:50%}
.a3-p .stk-brut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a3-lib{display:none;font-weight:500;color:var(--mu)}
.a3-d{display:none}
.a3-d.a3-d-st{display:block}
.a3-st{min-height:34px}
.a3-jour{display:flex !important;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 2px !important;padding:6px 12px;border-radius:9px;background:var(--s2)}
.a3-jour b{font:700 11px 'JetBrains Mono',monospace;color:var(--mu)}
.a3-liste > .a3-jour:first-child{margin-top:6px !important}

/* Classements */
.a3-barres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.a3-barres li{display:flex;flex-direction:column;gap:5px}
.a3-b-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;min-width:0}
.a3-b-t .stk-brut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.a3-b-t b{flex:none;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums}
.a3-b-j{height:6px;border-radius:999px;background:var(--s2);overflow:hidden}
.a3-b-j i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f97316,#fb923c)}
.a3-cote section:last-child .a3-b-j i{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.a3-cote-vide{margin:0;font-size:13px;color:var(--mu)}

/* Le chauffeur */
.a3-mis{display:flex;flex-direction:column;gap:8px}
.a3-mi{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--brd);background:var(--s1)}
.a3-mi.auj{box-shadow:inset 4px 0 0 #f97316}
.a3-mi-c{min-width:0;display:flex;flex-direction:column;gap:2px}
.a3-mi-c b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a3-mi-c small{font-size:12.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a3-mi-b{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--brd);background:var(--s2);color:var(--tx);font:700 13px 'Outfit',sans-serif;cursor:pointer}
.a3-mi-b svg{stroke:currentColor}
.a3-mi-b:hover{border-color:var(--or)}

@media(max-width:1180px){
  .a3-corps{grid-template-columns:minmax(0,1fr)}
  .a3-cote{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){ .a3-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:720px){
  #act2.a3{gap:10px}
  .a3-salut h2{font-size:20px}
  .a3-gestes{gap:8px}
  .a3-geste{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:12px 12px 12px 16px}
  .a3-geste-ic{width:38px;height:38px;border-radius:11px}
  .a3-geste-t b{font-size:14px;line-height:1.2}
  .a3-geste-t small,.a3-geste-fl{display:none}
  .a3-kpis{gap:8px}
  .a3-kpi{padding:11px 12px;gap:10px;border-radius:14px}
  .a3-kpi-ic{width:34px;height:34px;border-radius:10px}
  .a3-kpi-n{font-size:22px}
  .a3-kpi-l{font-size:12px;white-space:normal;line-height:1.2}
  .a3-kpi-s{font-size:11.5px}
  .a3-carte{padding:12px;border-radius:16px}
  .a3-cherche{flex:1 1 100%;min-width:0}
  .a3-cols{display:none !important}
  #act2 .a3-l{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"ic art h" "ic meta meta";row-gap:2px;padding:9px 4px}
  .a3-h{grid-area:h;align-self:start;padding-top:2px;font-size:12px}
  .a3-ic{grid-area:ic;align-self:start}
  .a3-art{grid-area:art}
  .a3-sens{display:none}
  .a3-meta{grid-area:meta;display:flex;align-items:center;gap:6px 10px;min-width:0;overflow:hidden;font-size:12.5px}
  .a3-ch{font-size:12.5px;flex:0 1 auto}
  .a3-p{font-size:12.5px;gap:5px;flex:0 1 auto}
  .a3-p.a3-vide{display:none}
  .a3-lib{display:inline}
  .a3-d.a3-d-st{grid-area:h}
  .a3-cote{display:none}
  .a3-mi{grid-template-columns:32px minmax(0,1fr) auto;padding:10px 12px}
  .a3-mi .cmdc-statut{display:none}
}

/* ═══ 2. LE SUIVI D'UNE DEMANDE (frise) ════════════════════════════════════
   Fait : rond vert plein avec une coche. En attente : pastille orange avec une
   horloge, son libellé en orange. À venir : un simple tiret fin et gris. Rien
   ne ressemble à un bouton : pas de rond vide, pas de survol, pas de pointeur. */
/* 29/10/2026 : la frise comptait cinq colonnes en dur. Avec « En route », la
   sixième étape tombait à la ligne, seule, avec un trait de liaison orphelin.
   Les colonnes se comptent maintenant toutes seules, quel que soit le nombre
   d'étapes, et le texte des étapes se resserre pour tenir sur un téléphone. */
body .cmdc-parcours{list-style:none;margin:0;padding:12px 6px 10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;
  border-radius:14px;background:var(--s2);border:1px solid var(--brd);cursor:default;user-select:none}
body .cmdc-parcours li{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--mu);text-align:center;min-width:0;pointer-events:none;overflow-wrap:normal;word-break:keep-all;hyphens:none}
body .cmdc-parcours li > span{flex:none;position:relative;z-index:1;display:block;box-sizing:border-box;
  width:22px;height:22px;margin:0;border:0 !important;border-radius:50%;background:transparent !important;box-shadow:none !important}
/* À venir : un tiret fin */
body .cmdc-parcours li:not(.fait) > span::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:3px;border-radius:2px;background:var(--brd2,var(--brd));transform:translate(-50%,-50%)}
/* Fait : rond vert plein + coche */
body .cmdc-parcours li.fait > span{background:#16a34a !important}
body .cmdc-parcours li.fait > span::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:center/13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
/* En attente (l'étape suivante) : pastille orange + horloge */
body .cmdc-parcours li:has(.cmdc-parcours-attente) > span{background:#f97316 !important;box-shadow:0 0 0 4px rgba(249,115,22,.18) !important}
body .cmdc-parcours li:has(.cmdc-parcours-attente) > span::after{width:auto;height:auto;inset:0;transform:none;border-radius:50%;
  background:center/13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
body .cmdc-parcours li:has(.cmdc-parcours-attente){color:var(--tx);font-weight:700}
/* Les traits entre les étapes */
body .cmdc-parcours li::before{content:'';position:absolute;top:10px;left:calc(-50% + 14px);right:calc(50% + 14px);width:auto;height:2px;border-radius:2px;background:var(--brd)}
body .cmdc-parcours li:first-child::before{display:none}
body .cmdc-parcours li.fait::before{background:#16a34a}
body .cmdc-parcours li:has(.cmdc-parcours-attente)::before{background:linear-gradient(90deg,#16a34a,#f97316)}
body .cmdc-parcours li.fait,body .cmdc-parcours li.en-cours{color:var(--tx)}
body .cmdc-parcours li.en-cours > span{box-shadow:none !important}
body .cmdc-parcours-q{display:block;font:600 10px 'Outfit',sans-serif;line-height:1.35;color:var(--mu);white-space:normal;overflow-wrap:anywhere}
body .cmdc-parcours li.fait .cmdc-parcours-q{color:#15803d}
body .cmdc-parcours-attente{color:#ea580c !important;font:700 10.5px 'Outfit',sans-serif !important;font-style:normal !important}
body.dark-theme .cmdc-parcours li.fait .cmdc-parcours-q{color:#4ade80}
body.dark-theme .cmdc-parcours-attente{color:#fb923c !important}
@media(max-width:720px){
  body .cmdc-parcours{padding:10px 4px 8px}
  body .cmdc-parcours li{font-size:10.5px}
  body .cmdc-parcours li > span{width:20px;height:20px}
  body .cmdc-parcours li::before{top:9px}
}

/* ═══ 3. COMMANDES DU RESPONSABLE ═══════════════════════════════════════════ */
.cmdc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:2px 0 12px}
.cmdc-kpi{--k:#f97316;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-radius:14px;background:var(--s1);border:1px solid var(--brd);
  box-shadow:0 1px 2px rgba(12,18,32,.04),0 4px 14px rgba(12,18,32,.04);cursor:default;font-family:'Outfit',sans-serif}
.cmdc-kpi.bl{--k:#2563eb}.cmdc-kpi.am{--k:#d97706}.cmdc-kpi.gr{--k:#16a34a}
.cmdc-kpi-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 13%,transparent);color:var(--k)}
.cmdc-kpi-ic svg{stroke:currentColor}
.cmdc-kpi b{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tx)}
.cmdc-kpi > span:last-child{font-size:12.5px;font-weight:600;color:var(--tx2,var(--tx));min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdc-kpi.zero b{color:var(--mu)}
.cmdc-kpi.zero .cmdc-kpi-ic{background:var(--s2);color:var(--mu)}

/* La liste : une carte blanche, plus de souffle, l'avancement en traits fins */
#cmdc .cmdc-ligne{padding:10px 12px 10px 10px;border-radius:16px;box-shadow:inset 4px 0 0 var(--qui),0 1px 2px rgba(12,18,32,.04),0 4px 14px rgba(12,18,32,.04)}
#cmdc .cmdc-ligne.on{box-shadow:inset 4px 0 0 var(--qui),0 0 0 2px color-mix(in srgb,var(--or) 40%,transparent),0 6px 18px rgba(12,18,32,.08)}
#cmdc .cmdc-droite{min-width:130px}
.cmdc-mini{flex:none;display:inline-flex;align-items:center;gap:3px;width:74px;cursor:default}
.cmdc-mini i{flex:1;height:4px;border-radius:2px;background:var(--brd)}
.cmdc-mini i.f{background:#16a34a}
.cmdc-mini i.a{background:#f97316}
.cmdc-mini-vide{visibility:hidden}
#cmdc .cmdc-chevron{opacity:.35}

/* Le détail : plus large sur grand écran, la frise en tête */
@media(min-width:1000px){
  #cmdc .cmdc-corps{grid-template-columns:minmax(0,1fr) minmax(400px,clamp(400px,36%,520px))}
}
#cmdc .cmdc-fiche{border-radius:18px;box-shadow:0 1px 2px rgba(12,18,32,.04),0 10px 28px rgba(12,18,32,.07)}
@media(max-width:1100px){ .cmdc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:720px){
  .cmdc-kpis{gap:8px;margin-bottom:10px}
  .cmdc-kpi{padding:9px 10px;gap:8px}
  .cmdc-kpi-ic{width:30px;height:30px}
  .cmdc-kpi b{font-size:19px}
  .cmdc-kpi > span:last-child{font-size:11.5px;white-space:normal;line-height:1.2}
  #cmdc .cmdc-droite{min-width:0}
  .cmdc-mini{display:none}
}

/* ═══ 4. COMMANDES DU DÉPÔT ═════════════════════════════════════════════════ */
#t-cmd #cmd-depot-list:has(> .dpc){display:block}
#t-cmd #cmd-depot-view > .sec:has(.dpc){background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;backdrop-filter:none !important}
#cmd-depot-view > .sec > .sec-hd{margin:2px 2px 12px}
#cmd-depot-view #cmd-depot-title{font:800 20px 'Outfit',sans-serif;letter-spacing:-.015em;text-transform:none;color:var(--tx)}
.dpc{display:flex;flex-direction:column;gap:18px;font-family:'Outfit',sans-serif;color:var(--tx)}
.dpc-kpis{margin:0}
.cmdc-kpi.vi{--k:#7c3aed}.cmdc-kpi.te{--k:#0d9488}
.dpc-groupe-t{display:flex;align-items:center;gap:10px;margin:0 2px 10px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.dpc-groupe-t::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--g)}
.dpc-groupe-t b{min-width:22px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--g) 14%,transparent);color:var(--g);font-size:11px}
.dpc-groupe-t::after{content:'';flex:1;height:1px;background:var(--brd)}
.dpc-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:14px;align-items:start}
.dpc-c{container-type:inline-size;display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border-radius:18px;background:var(--s1);border:1px solid var(--brd);cursor:pointer;
  box-shadow:inset 0 3px 0 var(--s),0 1px 2px rgba(12,18,32,.04),0 8px 24px rgba(12,18,32,.05);transition:border-color .15s,box-shadow .15s}
.dpc-c:hover{border-color:color-mix(in srgb,var(--s) 45%,var(--brd))}
.dpc-c.g-attente{background:color-mix(in srgb,var(--s1) 70%,var(--s2))}
.dpc-tete{display:flex;align-items:center;gap:12px;min-width:0}
.dpc-titre{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dpc-titre small{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpc-titre b{font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpc-alivrer{flex:none;padding:3px 8px;border-radius:7px;background:#ef4444;color:#fff;font:800 10.5px 'Outfit',sans-serif;letter-spacing:.06em}
.dpc-infos{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 16px;padding:12px 14px;border-radius:14px;background:var(--s2)}
.dpc-infos div{min-width:0}
.dpc-infos dt{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--mu);margin-bottom:2px}
.dpc-infos dd{margin:0;display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.dpc-manque{color:#d97706}
.dpc-frise{padding:10px 6px 8px}
.dpc-bloc-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.dpc-compte{font-family:'Outfit',sans-serif;text-transform:none;letter-spacing:0;font-size:12.5px}
.dpc-compte b{color:var(--tx);font-weight:800}
.dpc-arts ul{list-style:none;margin:0;padding:0;border:1px solid var(--brd);border-radius:14px;overflow:hidden}
.dpc-a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--brd);cursor:default}
.dpc-a:last-child{border-bottom:0}
.dpc-a-c{min-width:0;display:flex;flex-direction:column;gap:4px}
.dpc-a-t{display:flex;align-items:baseline;gap:8px;min-width:0}
.dpc-a-t .cmdc-ref{white-space:nowrap;flex:none}
.dpc-a-t b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dpc-a-b{display:flex;gap:6px;flex-wrap:wrap}
.dpc-a-note{font-size:11.5px;color:var(--mu);font-style:italic}
.dpc-q{font-size:16px;font-weight:800;color:#2563eb;white-space:nowrap;font-variant-numeric:tabular-nums}
.dpc-q-part{color:#d97706}.dpc-q small{font-size:11.5px;color:var(--mu);font-weight:600}
.dpc-etat{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--s2);color:var(--mu)}
.dpc-etat svg{stroke:currentColor}
.dpc-etat.ok{background:rgba(22,163,74,.12);color:#16a34a}
.dpc-etat.ko{background:rgba(220,38,38,.12);color:#dc2626}
.dpc-etat.wt{background:rgba(217,119,6,.13);color:#d97706}
/* Les vrais boutons d'un article : nommés, l'état choisi en plein */
.dpc-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--s2);border:1px solid var(--brd)}
.dpc-seg button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 9px;border:0;border-radius:9px;background:transparent;
  color:var(--tx2,var(--tx));font:700 12px 'Outfit',sans-serif;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.dpc-seg button svg{stroke:currentColor}
.dpc-seg button:hover{background:var(--s1)}
.dpc-seg button.ok.on{background:#16a34a;color:#fff}
.dpc-seg button.part.on{background:#d97706;color:#fff}
.dpc-seg button.ko.on{background:#dc2626;color:#fff}
.dpc-seg button.wt.on{background:#64748b;color:#fff}
.dpc-notes{display:flex;flex-direction:column;gap:6px}
.dpc-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:2px}
.dpc-info{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--mu)}
.dpc-info svg{stroke:currentColor}
.dpc-bts{display:flex;gap:8px;flex-wrap:wrap}
.dpc-bts .cmdc-bt{height:40px}
.cmdc-bt-o{background:#f97316}
.cmdc-bt-rl{background:var(--s1) !important;color:#dc2626 !important;box-shadow:inset 0 0 0 1.5px rgba(220,38,38,.45) !important}
.dpc-detail{margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--brd);background:var(--s1);
  color:var(--tx);font:700 13px 'Outfit',sans-serif;cursor:pointer}
.dpc-detail svg{stroke:currentColor}
.dpc-detail:hover{border-color:var(--or)}
@media(max-width:720px){
  .dpc{gap:14px}
  .dpc-c{padding:12px;border-radius:16px;gap:10px}
  .dpc-titre b{font-size:16px}
  .dpc-infos{padding:10px 12px;gap:8px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dpc-a{padding:9px 10px;gap:6px 10px}
  .dpc-a:not(.mod){grid-template-columns:minmax(0,1fr) auto auto}
  .dpc-a:not(.mod) .dpc-a-d{grid-column:auto}
  .dpc-bts{width:100%}
  .dpc-bts .cmdc-bt{flex:1 1 auto}
  .dpc-detail{margin-left:0}
}
/* La commande en cours de préparation prend toute la largeur : c'est elle qu'on traite. */
.dpc-c.actif,.dpc-groupe.g-faire .dpc-c,.dpc-groupe.g-pret .dpc-c{grid-column:1/-1}
@container (max-width:760px){
  .dpc-a.mod{grid-template-columns:minmax(0,1fr) auto}
  .dpc-a.mod .dpc-a-d{grid-column:1/-1}
  .dpc-a.mod .dpc-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;box-sizing:border-box}
  .dpc-a.mod .dpc-seg button{padding:0 4px}
}
@container (max-width:420px){
  .dpc-a.mod .dpc-seg button{font-size:11px;gap:3px}
  .dpc-a.mod .dpc-seg button svg{display:none}
}

/* 05/10/2026 : une phrase d'explication en tête de chaque onglet des commandes */
.cmdc-aide{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;color:var(--tx);
  background:color-mix(in srgb,var(--o) 9%,var(--s1));border:1px solid color-mix(in srgb,var(--o) 28%,var(--brd))}
.cmdc-aide i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--o)}