/* B4U V2 — version épurée · Futurs achats.
   Ce qui est propre à cet écran ; la trousse commune est dans epure.css.
   À gauche les listes et ce qu'il reste à payer pour chacune ; à droite la liste ouverte : sa boutique, un tableau
   par taille (prix à l'unité, « J'en veux », commandé, reste, reste à payer) et une carte par commande déjà passée.
   Quand la fiche est étroite (téléphone, petite fenêtre), le tableau devient une suite de petites cartes par taille. */

/* ───────── La liste : le montant qu'il reste à payer, à droite, sur les deux lignes ───────── */
.ach-lg .lg-s { grid-column: 1; display: block; }
.ach-lg .ach-m { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ach-lg .ach-m.rien { color: var(--encre-2); }
.ach-archives { display: block; margin: 16px 12px 6px; font-size: 13.5px; }

/* ───────── La fiche ───────── */
.ach-fiche { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1040px; container: ach / inline-size; }
.ach-note { margin-top: 4px; }
.ach-voir { font-weight: 600; white-space: nowrap; }
.ach-boutique { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; }
.ach-boutique label { font-weight: 700; }
.ach-boutique select { width: 200px; max-width: 100%; height: 40px; }
.ach-liens { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.ach-suite { display: block; color: var(--encre-2); font-size: 15px; font-weight: 400; }
.ach-gris { color: var(--encre-2); }
.ach-aide { color: var(--encre-2); font-size: 13.5px; }
.ach-vide { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; }

/* Le tableau : une ligne par taille */
.ach-table { padding: 6px 0 0; margin: 0; overflow: hidden; }
.ach-l { display: grid; align-items: center; padding: 0 22px; min-height: 58px; border-top: 1px solid var(--ligne); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Lot 6 — colonnes : Taille · Prix à l'unité · Déjà commandé · À commander · Reste à payer · actions de la taille */
.avec-prix .ach-l { grid-template-columns: minmax(0, 1fr) 130px 120px 150px 120px 40px; }
.sans-prix .ach-l { grid-template-columns: minmax(0, 1fr) 130px 150px 40px; }
.ach-chiffres { display: contents; }
.ach-l > *, .ach-chiffres > * { text-align: center; min-width: 0; }
.ach-l > :first-child { text-align: left; }
.avec-prix .ach-payer, .avec-prix .ach-entete > :nth-last-child(2) { text-align: right; white-space: nowrap; }
.ach-entete { min-height: 40px; border-top: 0; font-size: 13px; color: var(--encre-2); }
.ach-l[data-action] { cursor: pointer; }
.ach-l[data-action]:hover { background: var(--survol); }
.ach-etq { display: none; }
.ach-petit { font-size: 14px; font-weight: 600; }
.ach-trop { display: block; font-size: 12.5px; font-weight: 600; color: var(--encre-2); line-height: 1.2; }
.ach-nom { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; text-align: left; }
.ach-nom b { font-weight: 700; overflow-wrap: anywhere; }
.ach-nom small { font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
button.ach-nom:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ach-pu { width: 104px; height: 40px; border: 1px solid var(--bord-fort); border-radius: 10px; text-align: right; padding: 0 12px; font-weight: 700; font-size: 16px; background: var(--surface); font-variant-numeric: tabular-nums; }
.ach-pu:focus { outline: none; border-color: var(--bleu-500); box-shadow: 0 0 0 3px var(--halo); }
.ach-pas { display: inline-flex; align-items: center; border: 1px solid var(--bord-fort); border-radius: 10px; overflow: hidden; background: var(--surface); vertical-align: middle; }
.ach-pas button { width: 40px; height: 40px; padding: 0; border: 0; background: var(--fond); font-weight: 800; font-size: 18px; color: var(--encre); }
.ach-pas button:hover:not(:disabled) { background: var(--fond-2); }
.ach-pas button:disabled { color: var(--bord-fort); cursor: default; }
.ach-pas button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.ach-pas input { width: 44px; height: 40px; padding: 0; border: 0; border-radius: 0; text-align: center; font-weight: 800; font-size: 17px; background: var(--surface); }
.ach-pas input::placeholder { color: var(--encre-2); font-weight: 600; }
.ach-pas input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bleu-500); }
.ach-art { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 14px 22px 2px; border-top: 1px solid var(--ligne); font-size: 15px; }
.ach-art b { font-weight: 800; }
.ach-art + .ach-l { border-top: 0; }
.ach-total { background: var(--fond); }
.ach-total .ach-taille, .ach-total .ach-reste, .ach-total .ach-payer { font-weight: 800; }
.ach-total .ach-payer { font-size: 19px; }

/* Les commandes déjà passées pour cette liste, et les achats faits hors B4U */
.ach-commande { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; color: var(--encre); }
.ach-commande > .corps { flex: 1; min-width: 180px; }
.ach-commande b { font-size: 16px; }
.ach-commande .mono { font-weight: 500; }
.ach-hors .rg:first-of-type { border-top: 0; padding-top: 4px; }
.ach-hors .rg:last-child { padding-bottom: 0; }

/* ───────── Nouvelle liste ───────── */
.ach-creation { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; margin: 0; }
.ach-titre { margin: 6px 0 -4px; }
.ach-sous-champ { align-self: flex-start; font-size: 13.5px; }
.ach-nv-boutique { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ach-nv-boutique .entree { flex: 1 1 200px; }
.ach-rang { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.3fr); gap: 8px 12px; }
.ach-rang.avec-prix { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.3fr) 112px; }
.ach-rang + .ach-rang { border-top: 1px solid var(--ligne); padding-top: 14px; }
.ach-rang .r-gestes { grid-column: 1 / -1; display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13.5px; }
.ach-collees { background: var(--selection); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.ach-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--ligne); padding-top: 14px; }
.ach-pied .muet { flex: 1; min-width: 160px; font-size: 13.5px; }

/* ───────── Fenêtres : grille de tailles, collage d'une liste, commande d'une partie ───────── */
.ach-familles { flex-wrap: wrap; align-self: flex-start; }
.ach-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.ach-case { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--bord); border-radius: 9px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; text-align: center; }
.ach-case input { width: 100%; height: 34px; border-radius: 7px; border: 1px solid var(--bord-fort); background: var(--surface); text-align: center; font-variant-numeric: tabular-nums; }
.ach-case input:focus { outline: none; border-color: var(--bleu-500); box-shadow: 0 0 0 3px var(--halo); }
.ach-apercu { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; font-size: 13px; }
.ach-collage { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ach-collage th { text-align: left; font-size: 12px; font-weight: 700; color: var(--encre-2); padding: 4px 8px 6px 0; }
.ach-collage td { padding: 5px 8px 5px 0; border-top: 1px solid var(--ligne); }
.ach-collage .droite { text-align: right; padding-right: 0; }
/* « Commander une partie seulement » : une ligne par taille — la variante, le reste à commander, la quantité choisie */
.ach-part { display: flex; flex-direction: column; outline: none; }
.ach-part-art { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; padding: 14px 0 2px; font-size: 14.5px; }
.ach-part-art:first-child { padding-top: 0; }
.ach-part-art b { font-weight: 800; }
.ach-part-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }
.ach-part-art + .ach-part-l { border-top: 0; }
.ach-part-var { display: flex; flex-direction: column; min-width: 0; }
.ach-part-nom { display: flex; align-items: baseline; gap: 0 8px; flex-wrap: wrap; }
.ach-part-var b { font-size: 16.5px; font-weight: 700; overflow-wrap: anywhere; }
.ach-part-var small { font-size: 13px; font-weight: 500; color: var(--encre-2); line-height: 1.35; }
.ach-part-reste { text-align: right; font-size: 14.5px; color: var(--encre-2); white-space: nowrap; }
.ach-part-reste b { font-size: 16px; font-weight: 700; color: var(--encre); }
.ach-part-l:not(.prise) .ach-part-pas input { color: var(--encre-2); font-weight: 600; }
.ach-part-bilan { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font-size: 15px; color: var(--encre-2); }
.ach-part-bilan b { font-weight: 800; color: var(--encre); }
.ach-part-montant { font-weight: 600; color: var(--encre); white-space: nowrap; }
.ach-part-racc { display: inline-flex; gap: 16px; margin-left: auto; font-size: 13.5px; }

/* ───────── Fiche moyenne (petit portable) : le même tableau, colonnes resserrées ───────── */
@container ach (min-width: 560px) and (max-width: 719px) {
  .ach-l { padding: 0 16px; font-size: 16px; }
  .avec-prix .ach-l { grid-template-columns: minmax(0, 1fr) 100px 84px 134px 96px 34px; }
  .sans-prix .ach-l { grid-template-columns: minmax(0, 1fr) 96px 134px 34px; }
  .ach-pu { width: 96px; padding: 0 10px; }
  .ach-nom { flex-wrap: wrap; gap: 0 6px; }
  .ach-entete { font-size: 12.5px; }
  .ach-art { padding-left: 16px; padding-right: 16px; }
  .ach-total .ach-payer { font-size: 17px; }
}

/* ───────── Fiche étroite (téléphone, petite fenêtre) : une petite carte par taille ───────── */
@container ach (max-width: 559px) {
  .ach-table { padding-top: 0; }
  .ach-entete { display: none; }
  .ach-entete + .ach-l, .ach-entete + .ach-art { border-top: 0; }
  .avec-prix .ach-l, .sans-prix .ach-l { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 14px 16px; min-height: 0; font-size: 16px; }
  .avec-prix .ach-l, .sans-prix .ach-l { grid-template-columns: auto minmax(0, 1fr) auto; }
  .avec-prix .ach-l { grid-template-areas: "taille chiffres plus" "prix veux veux"; }
  .sans-prix .ach-l { grid-template-areas: "taille veux plus" "chiffres chiffres chiffres"; }
  .ach-l > .ach-plus { grid-area: plus; }
  .ach-l > .ach-taille { grid-area: taille; }
  .ach-l > .ach-prix { grid-area: prix; text-align: left; }
  .ach-l > .ach-veux { grid-area: veux; justify-self: end; text-align: right; }
  .ach-chiffres { grid-area: chiffres; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 6px; font-size: 14.5px; }
  .sans-prix .ach-chiffres { justify-content: flex-start; }
  .ach-l.complet .ach-chiffres { color: var(--encre-2); }
  .ach-chiffres > * { white-space: nowrap; }
  .ach-etq { display: inline; }
  .ach-prix > .ach-etq, .ach-veux > .ach-etq { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: var(--encre-2); }
  .ach-trop { display: inline; margin-left: 6px; font-size: inherit; }
  .ach-trop::before { content: '·'; margin-right: 6px; }
  .ach-cmd.rien, .ach-payer.rien { display: none; }
  .ach-cmd { order: 3; flex-basis: 100%; text-align: right; font-size: 13px; font-weight: 600; color: var(--encre-2); }
  .sans-prix .ach-cmd { flex-basis: auto; font-size: inherit; }
  .ach-art { padding: 14px 16px 0; }
  /* Le total : le montant en face, le détail des quantités dessous */
  .avec-prix .ach-total, .sans-prix .ach-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
  .ach-total > .ach-taille { order: 0; flex: 1; }
  .ach-total .ach-chiffres { display: contents; }
  .ach-total .ach-payer { order: 1; font-size: 19px; }
  .ach-total .ach-payer::before { content: none; }
  .ach-total::after { content: ''; order: 2; flex-basis: 100%; }
  .ach-total > .ach-prix, .ach-total > .ach-plus { display: none; }
  .ach-total > .ach-veux, .ach-total .ach-cmd, .ach-total .ach-reste { order: 3; flex-basis: auto; font-size: 14px; font-weight: 600; color: var(--encre-2); }
  .ach-total > .ach-veux > .ach-etq { display: inline; margin: 0; font-size: inherit; }
  .ach-total .ach-cmd::before, .ach-total .ach-reste::before, .ach-total .ach-cmd:not(.rien) + .ach-reste::before { content: '·'; margin-right: 6px; }
  .ach-boutique, .ach-commande, .ach-vide { padding-left: 16px; padding-right: 16px; }
  .ach-boutique select { flex: 1 1 160px; width: auto; }
  .ach-creation { padding: 16px; }
  .ach-rang, .ach-rang.avec-prix { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ach-rang .r-nom, .ach-rang .r-tailles { grid-column: 1 / -1; }
  .ach-rang .r-nom { order: 1; }
  .ach-rang .r-tailles { order: 2; }
  .ach-rang .r-gestes { order: 3; }
  .ach-rang .r-couleur, .ach-rang .r-prix { order: 4; }
  .ach-rang:not(.avec-prix) .r-couleur { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* Feuille « Commander une partie seulement » : un pas-à-pas à la taille du doigt (44 px), raccourcis faciles à viser */
  .ach-part-l { gap: 4px 12px; }
  .ach-part-pas button { width: 44px; height: 44px; font-size: 20px; }
  .ach-part-pas input { width: 46px; height: 44px; }
  /* Le pied garde la même hauteur de 0 à N unités : le compte sur une ligne ; le montant (et les unités « à décider »)
     avec les raccourcis sur la suivante, haute de 44 px quoi qu'il arrive ; puis les deux boutons l'un sous l'autre.
     Rien ne se déplace sous le doigt quand on appuie sur « + ». */
  .ach-part-bilan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; }
  #m-part-resume { display: contents; }
  .ach-part-quoi { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ach-part-suite { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 1.3; }
  .ach-part-sep { display: none; }
  .ach-part-racc { grid-column: 2; grid-row: 2; gap: 4px; margin-right: -8px; }
  .ach-part-racc .lien { min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 14.5px; }
  [data-modale="partie-achat"] .modale-pied .btn { flex: 1 1 100%; }
  .ach-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ach-case input { height: 42px; font-size: 16px; }
  .ach-pied .btn { flex: 1; height: 44px; }
  .ach-pied .muet { flex-basis: 100%; }
  .ach-liens { gap: 12px 20px; }
}

/* ───────── Coller une liste (V4) : le lien en tête de la rubrique, puis le volet « coller → vérifier → ajouter » ───────── */
.ach-coller { flex-basis: 100%; align-self: flex-start; font-size: 14.5px; }
.acl-form, .acl-suite { display: flex; flex-direction: column; gap: 16px; margin: 0; min-width: 0; }
.acl-saisie textarea { font-family: var(--mono); font-size: 13px; line-height: 1.55; min-height: 200px; white-space: pre; overflow: auto; }
.acl-saisie .aide { font-size: 13.5px; color: var(--encre-2); line-height: 1.45; }
/* Les problèmes : la ligne du texte, ce qui y est écrit, ce qui ne va pas */
.acl-problemes { display: flex; flex-direction: column; gap: 4px; }
.acl-problemes .carte-titre { margin-bottom: 0; }
.acl-problemes .carte-titre:not(:first-child) { margin-top: 10px; }
.acl-pb { list-style: none; margin: 0; padding: 0; }
.acl-pb li { padding: 9px 0; border-top: 1px solid var(--ligne); font-size: 14.5px; overflow-wrap: anywhere; }
.acl-pb li:first-child { border-top: 0; }
.acl-cite { font-family: var(--mono); font-size: 12.5px; color: var(--encre-2); }
.acl-quoi { display: block; }
.acl-repetition, .acl-deja { display: flex; flex-direction: column; gap: 4px; }
.acl-deja .ach-liens { margin-top: 8px; }
/* L'aperçu : une ligne par article, qui se déplie en une ligne par taille */
.acl-table { padding: 6px 0 0; margin: 0; overflow: hidden; }
.acl-l { display: grid; align-items: center; gap: 0 10px; padding: 0 22px; min-height: 54px; border-top: 1px solid var(--ligne); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.avec-prix .acl-l { grid-template-columns: minmax(0, 2fr) minmax(84px, 1fr) 84px 76px 116px 116px; }
.sans-prix .acl-l { grid-template-columns: minmax(0, 2fr) minmax(84px, 1fr) 110px 110px; }
.acl-l > * { min-width: 0; text-align: center; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.acl-l > .acl-nom, .acl-l > .acl-tailles, .acl-entete > :nth-child(-n+2) { justify-content: flex-start; text-align: left; }
.avec-prix .acl-l > :nth-child(n+5) { justify-content: flex-end; text-align: right; white-space: nowrap; }
.acl-entete { min-height: 40px; border-top: 0; font-size: 13px; line-height: 1.2; color: var(--encre-2); }
.acl-l [data-action="col-plier"] { cursor: pointer; }
.acl-nom { gap: 4px; }
.acl-nom a, .acl-nom b { font-weight: 700; overflow-wrap: anywhere; }
.acl-plier { flex: none; width: 30px; height: 30px; margin-left: -8px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--encre-2); display: inline-flex; align-items: center; justify-content: center; }
.acl-plier:hover { background: var(--fond-2); color: var(--encre); }
.acl-plier:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--halo); }
.acl-tailles { font-weight: 600; overflow-wrap: anywhere; }
.acl-manque { font-size: 14px; white-space: normal; }
.acl-art.ouvert > .acl-l { background: var(--surface-2); }
.acl-art.retire > .acl-l { color: var(--encre-2); }
.acl-detail { display: flex; flex-direction: column; padding: 2px 22px 10px 48px; background: var(--surface-2); border-top: 1px solid var(--ligne); }
.acl-t { display: grid; grid-template-columns: minmax(48px, 1fr) auto auto 116px 64px; align-items: center; gap: 6px 16px; padding: 8px 0; border-top: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }
.sans-prix .acl-t { grid-template-columns: minmax(48px, 1fr) auto 64px; }
.acl-t:first-child { border-top: 0; }
.acl-t > b { font-size: 16px; overflow-wrap: anywhere; }
.acl-t-etq { display: none; }
.acl-t-tot { text-align: right; font-weight: 700; white-space: nowrap; }
.acl-t-ret { justify-self: end; font-size: 13.5px; }
.acl-t.retiree, .sans-prix .acl-t.retiree { grid-template-columns: minmax(48px, auto) minmax(0, 1fr) auto; color: var(--encre-2); }
.acl-t-info { font-size: 14px; }
.acl-total { background: var(--fond); }
.acl-total > * { font-weight: 800; }
.acl-total .acl-tailles { grid-column: span 2; font-weight: 600; color: var(--encre-2); font-size: 14.5px; }
.acl-total .acl-tot { font-size: 18px; }
.acl-astuce { margin: 0; padding: 10px 22px 12px; border-top: 1px solid var(--ligne); }
.acl-ou .carte-titre { margin-bottom: 10px; }
.acl-ou .ach-aide { margin-top: 10px; }
.acl-pied { border-top: 0; padding-top: 0; }
.acl-resume { flex: 1; min-width: 160px; font-size: 14.5px; color: var(--encre-2); }
.acl-resume b { color: var(--encre); font-weight: 800; }

@container ach (min-width: 560px) and (max-width: 719px) {
  .acl-l { padding: 0 16px; font-size: 15px; gap: 0 8px; }
  .avec-prix .acl-l { grid-template-columns: minmax(0, 1.6fr) minmax(70px, 1fr) 70px 62px 98px 104px; }
  .acl-entete { font-size: 12px; }
  .acl-detail { padding-left: 40px; padding-right: 16px; }
  .acl-t { grid-template-columns: minmax(40px, 1fr) auto auto 100px 56px; gap: 6px 10px; }
  .acl-astuce { padding-left: 16px; padding-right: 16px; }
}
/* Fiche étroite (téléphone) : un article devient une petite carte ; dépliée, chaque taille tient sur deux lignes */
@container ach (max-width: 559px) {
  .acl-table { padding-top: 0; }
  .acl-table .acl-l.acl-entete { display: none; }
  .acl-entete + .acl-art > .acl-l { border-top: 0; }
  .avec-prix .acl-l, .sans-prix .acl-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 12px 16px; min-height: 0; }
  .acl-l > * { display: block; padding: 0; align-self: auto; text-align: left; }
  .acl-l > .acl-nom { display: flex; align-items: center; flex: 1 1 0; min-width: 60%; order: 0; }
  .acl-l > .acl-tot { order: 1; margin-left: auto; text-align: right; }
  .acl-l > .acl-tailles { order: 2; flex-basis: 100%; }
  .acl-l > .acl-qt, .acl-l > .acl-qtt, .acl-l > .acl-pu { order: 3; font-size: 14px; font-weight: 600; color: var(--encre-2); }
  .acl-l > .acl-qt:empty, .acl-l > .acl-qtt:empty, .acl-l > .acl-pu:empty { display: none; }
  .acl-l > .acl-qt:empty + .acl-qtt::before { content: none; }
  .acl-l > .acl-qtt::before, .acl-l > .acl-pu:not(:empty)::before { content: '·'; margin-right: 6px; }
  .acl-total > .acl-qtt::before { content: none; }
  .acl-detail { padding: 2px 16px 10px; }
  .acl-t, .sans-prix .acl-t { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t r" "q p"; gap: 8px 12px; padding: 10px 0; }
  .acl-t > b { grid-area: t; }
  .acl-t-ret { grid-area: r; min-height: 32px; }
  .acl-t-q { grid-area: q; }
  .acl-t-p { grid-area: p; justify-self: end; text-align: right; }
  .acl-t-tot { display: none; }
  .acl-t-etq { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: var(--encre-2); }
  .acl-t.retiree, .sans-prix .acl-t.retiree { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t r" "i i"; }
  .acl-t-info { grid-area: i; }
  .acl-astuce { padding: 10px 16px 12px; }
}
@media (max-width: 760px) {
  .acl-saisie textarea { font-size: 16px; min-height: 180px; }
  .acl-detail .ach-pas button { width: 44px; height: 44px; font-size: 20px; }
  .acl-detail .ach-pas input { width: 46px; height: 44px; }
  .acl-detail .ach-pu { height: 44px; }
  .acl-pied .acl-resume { flex-basis: 100%; }
  .acl-pied .btn-primaire { flex: 2; }
  .ach-coller { min-height: 32px; display: inline-flex; align-items: center; }
}

/* ───────── Lot 6 — états d'une taille, actions, tailles retirées ───────── */
/* Sur la fiche large, « Déjà commandé » passe devant « À commander » (l'ordre de lecture) sans changer le balisage. */
@container ach (min-width: 560px) {
  .ach-l:not(.ach-entete) > * , .ach-l:not(.ach-entete) .ach-chiffres > * { grid-row: 1; }
  .ach-l:not(.ach-entete) > .ach-taille { grid-column: 1; }
  .avec-prix .ach-l:not(.ach-entete) > .ach-prix { grid-column: 2; }
  .avec-prix .ach-l:not(.ach-entete) .ach-cmd { grid-column: 3; }
  .avec-prix .ach-l:not(.ach-entete) > .ach-veux { grid-column: 4; }
  .avec-prix .ach-l:not(.ach-entete) .ach-payer { grid-column: 5; }
  .avec-prix .ach-l:not(.ach-entete) > .ach-plus { grid-column: 6; }
  .sans-prix .ach-l:not(.ach-entete) .ach-cmd { grid-column: 2; }
  .sans-prix .ach-l:not(.ach-entete) > .ach-veux { grid-column: 3; }
  .sans-prix .ach-l:not(.ach-entete) > .ach-plus { grid-column: 4; }
}
.ach-taille { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.ach-mention { flex: none; }
.ach-partielle { font-size: 12.5px; font-weight: 600; color: var(--encre-2); white-space: nowrap; }
.ach-menu { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--encre-2); }
.ach-menu:hover { background: var(--fond-2); color: var(--encre); }
.ach-menu:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.ach-menu svg { width: 18px; height: 18px; }
/* Entièrement commandé : atténué, la taille barrée, et le mot « Commandé ». */
.ach-l.etat-commandee { color: var(--encre-2); }
.ach-l.etat-commandee .ach-nom b { text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 600; }
.ach-l.etat-commandee .ach-pas input, .ach-l.etat-arretee .ach-pas input { color: var(--encre-2); font-weight: 600; }
/* Arrêté à zéro à la main : atténué, pas barré (rien n'est commandé pour ce reste), pastille en pointillé. */
.ach-l.etat-arretee { color: var(--encre-2); }
.ach-arret { background: none; box-shadow: inset 0 0 0 1px var(--bord-fort); border-style: dashed; }
.ach-l.etat-arretee .ach-nom b { font-weight: 600; }
/* Rupture de stock : fond et filet rouges, cloche et texte (la couleur ne porte jamais seule l'information). */
.ach-l.etat-rupture { background: var(--t-rouge-f); box-shadow: inset 4px 0 0 var(--t-rouge); }
.ach-l.etat-rupture[data-action]:hover { background: #fbdcdc; }
.ach-l.etat-rupture .ach-nom b { color: var(--t-rouge); }
.ach-l.etat-rupture .ach-mention { background: var(--t-rouge); color: #fff; }
.ach-retirer { color: var(--encre-2); }
.ach-retirees { display: flex; flex-direction: column; gap: 8px; }
.ach-ret { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--ligne); }
.ach-ret-gestes { display: inline-flex; gap: 16px; }
.ach-retrait { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow: auto; }
.ach-retrait-art { margin: 0; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px; }
.ach-retrait-art legend { padding: 0 4px; }
.ach-retrait-tout, .ach-retrait-l { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ach-retrait-l { padding: 7px 4px; border-top: 1px solid var(--ligne); }
.ach-retrait-l:first-of-type { border-top: 0; }
.ach-retrait-l small { display: block; font-size: 13px; color: var(--encre-2); }
.ach-retrait input[type=checkbox] { margin-top: 3px; flex: none; }
.ach-detail { margin-bottom: 14px; }
.ach-detail-bloc { margin-top: 14px; }
.ach-detail-bloc h4 { margin-bottom: 6px; font-size: 14px; }
.ach-detail-bloc .rg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ligne); }
.ach-detail-bloc .rg:first-of-type { border-top: 0; }