/* B4U V2 — version épurée · Commandes : la liste et la fiche.
   Ce qui est propre à cet écran (classes « cde- ») ; la trousse commune est dans epure.css. */

/* ───────── La liste ───────── */
.cde-cherche { display: flex; gap: 8px; }
.cde-q { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--bord-fort); border-radius: 10px; padding: 0 14px; background: var(--surface); -webkit-appearance: none; appearance: none; }
.cde-q:focus { outline: none; border-color: var(--bleu-500); box-shadow: 0 0 0 3px var(--halo); }
.cde-q::-webkit-search-cancel-button { cursor: pointer; }
.cde-cherche .btn-points { flex: none; color: var(--encre-2); }
.cde-cherche .cde-filtre-actif { border-color: var(--encre); color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.cde-outils .onglets { gap: 18px; }
.cde-outils .onglet { font-size: 14.5px; font-weight: 700; }
.cde-outils .onglet .n { font-weight: 700; }
.cde-note-liste { padding: 10px 12px 8px; font-size: 13.5px; color: var(--encre-2); border-bottom: 1px solid var(--ligne); }
.cde-note-liste b { color: var(--encre); }
/* Quatre informations, toujours à la même place : nom et prix en haut, statut et responsable en bas. */
.cde-l .lg-t { grid-column: 1; grid-row: 1; }
.cde-l .cde-prix { grid-column: 2; grid-row: 1; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.cde-l .lg-s { grid-column: 1; grid-row: 2; }
.cde-l .cde-qui { grid-column: 2; grid-row: 2; }
.cde-l.sans-prix .lg-t { grid-column: 1 / -1; }
.cde-sans-num { font-size: 13px; font-weight: 500; color: var(--encre-3); }
/* Le nom du client cède la place : la prochaine chose (« en procédure », « avant le 13 oct. ») reste lisible. */
.cde-l .lg-s { gap: 5px; }
.cde-l .lg-s > .statut { margin-right: 3px; }
.cde-l .lg-s > .tronque { flex: 0 1 auto; }
.cde-suite { flex: 0 0 auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Une suite longue (« Remboursement en attente ») ne doit pas effacer le nom : il garde sa part de la ligne. */
.cde-l .lg-s:has(> .cde-suite.longue) > .tronque { flex: 0 0 auto; max-width: 40%; }
.cde-suite.longue { flex: 1 1 0; min-width: 0; max-width: none; }
.lg-vide .lien { margin-top: 6px; }

/* ───────── La fiche ───────── */
.cde-gris { color: var(--encre-2); }
.cde-petit { font-size: 13.5px; }
.cde-bloc { display: block; }
.tete-fiche h2 .cde-num-vide, .tete-fiche h2 .cde-sans-num { font-size: 17px; font-weight: 600; }
.cde-bandeau { background: var(--fond-2); border-color: var(--bord-fort); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.cde-bandeau b { font-size: 16px; }
.cde-tete-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.tete-fiche > .titres:has(+ .cde-tete-actions) { min-width: 190px; }

/* « Maintenant » : statut, prochaine action, responsable ; dessous, appel, procédure, tâche */
.cde-now-haut { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.cde-now-statut { display: inline-flex; align-items: center; gap: 8px; }
.cde-now-statut .statut { height: 30px; font-size: 13.5px; padding: 0 11px; }
.cde-now-quoi { flex: 1; min-width: 220px; }
.cde-now-quoi > b { display: block; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.cde-now-bas { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 10px; }
.cde-now-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cde-plus-tache { margin-left: 10px; }
.cde-mention { overflow-wrap: anywhere; }
.cde-proc { min-height: 40px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 5px; }

/* Coordonnées : toujours ouvertes, sous la carte « maintenant ». Une ligne par information : son libellé, sa valeur,
   son bouton de copie. Deux colonnes (la personne, puis les adresses et le numéro) quand la carte est large, une seule
   sinon ; les longues valeurs passent à la ligne. */
.cde-coord { container: coord / inline-size; }
.cde-coord-liens { display: inline-flex; align-items: baseline; gap: 18px; }
.cde-coord-cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.cde-coord-col { min-width: 0; }
.cde-co { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 54px; padding: 7px 0; border-top: 1px solid var(--ligne); }
.cde-co .etq { grid-column: 1; font-size: 13px; align-self: end; }
.cde-co-val { grid-column: 1; min-width: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; align-self: start; }
.cde-co-val:first-child { align-self: center; }
.cde-co-val b { font-weight: 700; }
.cde-co-part { max-width: 100%; padding: 0 3px; margin: 0 -3px; border: 0; border-radius: 5px; background: none; font: inherit; color: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; vertical-align: baseline; }
.cde-co-part:hover { background: var(--fond-2); }
.cde-co-val .mono { font-size: 15px; }
.cde-co-adresse { display: block; white-space: pre-line; }
.cde-co-vide { color: var(--encre-3); font-size: 15px; }
.cde-co-note { display: block; color: var(--encre-2); font-size: 13.5px; }
.cde-co-nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.cde-co-nom b { min-width: 0; }
.cde-co-fiche { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.btn-icone.cde-co-copier { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; margin-right: -8px; }
@container coord (min-width: 480px) {
  .cde-coord-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
}

/* Deux colonnes : colis et articles, puis notes, montants et blocs repliés */
.cde-cols { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.cde-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cde-col-p { flex: 1.7 1 380px; }
.cde-col-c { flex: 1 1 260px; }
.cde-carte { padding: 16px 20px 8px; }
.cde-carte .carte-titre .fin { margin-left: auto; font-weight: 700; }
.cde-carte .carte-titre button.fin { font-weight: 600; }
.cde-carte .rg.cde-petit { padding: 9px 0 10px; }

/* Colis : le numéro et son état sur une ligne, le reste dessous */
.cde-colis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.cde-colis-infos { grid-column: 1 / -1; color: var(--encre-2); display: flex; flex-direction: column; gap: 1px; }
.cde-suivi { font-size: 13px; overflow-wrap: anywhere; }
.cde-suivi .copiable { max-width: calc(100% + 12px); }
.cde-colis button.statut .ic-xs, .cde-now button.statut .ic-xs { width: 12px; height: 12px; margin-right: -2px; }
.cde-codes { margin: 6px 0 12px; }
/* V5 · logistique — « Récupération confiée à » : un champ sur chaque colis encore à récupérer */
.cde-recup { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 2px; }
.cde-recup label { flex: none; }
select.cde-recup-qui { flex: 1 1 150px; width: auto; min-width: 0; max-width: 250px; height: 34px; padding-left: 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--encre); text-overflow: ellipsis; }

/* Articles : le nom et le prix sur une ligne, le détail dessous */
.cde-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.cde-art-nom { min-width: 0; overflow-wrap: anywhere; }
.cde-art-nom a, .cde-art-nom b { font-weight: 600; }
.cde-art-prix { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.cde-art-prix b { margin-left: 8px; }
.cde-art-infos { grid-column: 1 / -1; color: var(--encre-2); display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.cde-art .copiable { color: var(--encre-2); }
.cde-fin-edition { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 8px; }

/* Notes */
.cde-notes-carte { padding-bottom: 16px; }
.cde-note { padding: 8px 0; font-size: 14.5px; overflow-wrap: anywhere; }
.cde-note + .cde-note { border-top: 1px solid var(--ligne); }
.cde-note-qui { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cde-note-qui .cde-gris b { color: var(--encre); font-weight: 600; }
.cde-note-qui .btn-icone { margin: -4px -8px -2px 0; flex: none; }
.cde-note-texte { white-space: pre-wrap; }
.cde-note.en-edition { display: flex; flex-direction: column; gap: 6px; }
.cde-note.en-edition textarea { height: auto; min-height: 70px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.cde-note-fin { display: flex; justify-content: flex-end; gap: 6px; }
.cde-voir-notes { display: block; margin: 2px 0 2px; }
.cde-notes-carte form[data-form="note"] { margin-top: 8px; }
.cde-notes-carte .entree-ligne { height: 40px; padding: 0 12px; }

/* Montants (Patron seulement) */
.cde-montants-liens { flex-wrap: wrap; }
.cde-montants-detail { border-top: 1px solid var(--ligne); padding: 12px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.cde-montants-detail .montants-table { font-size: 13px; }
.cde-montants-detail .montants-table td { width: 74px; padding-left: 6px; }
.cde-mvt { list-style: none; margin: 0; padding: 0; }
.cde-mvt li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ligne); font-size: 13.5px; }
.cde-mvt li > div { flex: 1; min-width: 0; }
.cde-mvt li b { font-weight: 600; }
.cde-mvt li small { display: block; color: var(--encre-2); }

/* Historique : la couleur du point dit de quoi il s'agit (rouge : annulation, retrait, procédure) */
.histo-ligne.h-statut .pt { border-color: var(--bleu-500); }
.histo-ligne.h-argent .pt { border-color: var(--patron); }
.histo-ligne.h-stock .pt { border-color: var(--t-violet); }
.histo-ligne.h-alerte .pt, .histo-ligne.h-annulation .pt, .histo-ligne.h-retrait .pt, .histo-ligne.h-procedure .pt { border-color: var(--t-rouge); }
.histo-ligne.h-appel .pt, .histo-ligne.h-tache .pt, .histo-ligne.h-note .pt { border-color: var(--bleu-clair); }

/* Blocs repliés */
.cde-pli > summary { display: flex; align-items: center; gap: 10px; padding: 14px 20px; cursor: pointer; list-style: none; }
.cde-pli > summary::-webkit-details-marker { display: none; }
.cde-pli > summary b { font-size: 15px; font-weight: 700; }
.cde-pli > summary .cde-gris { font-size: 13.5px; }
.cde-chevron { margin-left: auto; display: inline-flex; color: var(--encre); transition: transform var(--vite); }
.cde-pli[open] > summary .cde-chevron { transform: rotate(90deg); }
.cde-pli-corps { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cde-pli-corps > .liste { margin: 0 -8px; }
.cde-pli-corps .fc-appels { padding: 0; border-top: 0; }
.cde-champ { display: flex; flex-direction: column; min-width: 0; }
.cde-champ .etq { font-size: 12.5px; }
.cde-val { overflow-wrap: anywhere; min-width: 0; }
.cde-val .copiable .ic { opacity: .45; }
.cde-pli-corps > button.lien { align-self: flex-start; }
.cde-trace { align-items: flex-start; }
.cde-trace > :first-child { flex: 0 0 130px; }
.cde-trace > :last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ───────── Écran moyen : la liste garde assez de place pour ses quatre onglets ───────── */
@media (max-width: 1240px) and (min-width: 901px) {
  .duo:has(.cde-outils) { --duo-l: 392px; }
  .cde-outils .onglets { gap: 10px; }
  .cde-outils .onglet { font-size: 14px; gap: 4px; }
}

/* ───────── Téléphone ───────── */
@media (max-width: 760px) {
  .cde-outils .onglets { gap: 14px; }
  .cde-outils .onglet { font-size: 14px; gap: 4px; padding: 10px 0 11px; }
  .cde-q { font-size: 16px; height: 44px; }
  .cde-cherche .btn-points { width: 44px; height: 44px; }
  .cde-now-quoi { min-width: 100%; order: 3; }
  .cde-now-haut .qui-fait { margin-left: auto; }
  .cde-now-actions .btn, .cde-now-actions .cde-proc { flex: 1 1 100%; }
  .cde-plus-tache { margin: 0 auto; padding: 8px 12px; }
  .tete-fiche > .titres:has(+ .cde-tete-actions) { min-width: 0; }
  .cde-tete-actions { display: contents; }
  .cde-carte { padding: 14px 16px 6px; }
  .cde-co { min-height: 58px; }
  .btn-icone.cde-co-copier { width: 44px; height: 44px; margin-right: -10px; }
  .cde-co-val a { display: inline-block; padding: 3px 0; }
  .cde-notes-carte { padding-bottom: 14px; }
  .cde-pli > summary { padding: 15px 16px; }
  .cde-pli-corps { padding: 0 16px 14px; }
  .cde-notes-carte .entree-ligne { height: 44px; font-size: 16px; }
  .cde-note.en-edition textarea { font-size: 16px; }
  .cde-note-qui .btn-icone { width: 42px; height: 42px; margin: -8px -10px -6px 0; }
  .cde-pli-corps .btn-icone.sm { width: 42px; height: 42px; }
  .cde-note-fin .btn-sm, .cde-pli-corps .btn-sm { height: 42px; }
  /* Une pastille ou un lien se touche du pouce : la zone sensible dépasse le dessin. */
  .cde-carte button.statut, .cde-now button.statut, .cde-carte button.lien, .cde-now button.lien, .cde-pli-corps button.lien { position: relative; }
  .cde-carte button.statut::after, .cde-now button.statut::after, .cde-carte button.lien::after, .cde-now button.lien::after, .cde-pli-corps button.lien::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 42px; transform: translateY(-50%); }
  .cde-trace { flex-direction: column; gap: 2px; }
  .cde-trace > :first-child { flex: none; }
  /* « Récupération confiée à » : le libellé au-dessus, le champ sur toute la largeur, à la taille du doigt */
  .cde-recup { flex-direction: column; align-items: stretch; gap: 4px; margin: 8px 0 6px; }
  select.cde-recup-qui { flex: none; width: 100%; max-width: none; height: 46px; font-size: 16px; border-radius: 11px; }
}

/* ───────── Impression : la fiche seule ───────── */
@media print {
  .principal:has(> .vue-duo) { height: auto; overflow: visible; }
  .duo { display: block; }
  .duo-liste, .duo-retour, .cde-now-bas, .tete-fiche .btn, .cde-coord-liens, .cde-co-copier { display: none !important; }
  .duo-fiche { overflow: visible; }
}

/* ═════════ Formulaire « Nouvelle commande » / « Modifier la commande » ═════════
   Une seule colonne, dans l'ordre où l'on saisit : boutique et numéro, pour qui, articles, puis « Plus de détails »
   replié. Un seul bouton principal, dans la barre du bas. Classes « fcm- » (l'écran) et « art- » (l'éditeur
   d'articles, que la fiche reprend pour modifier les articles en place). */
.fcm { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fcm-retour { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-weight: 700; color: var(--encre-2); margin: 0 0 -8px -4px; }
.fcm-retour:hover { color: var(--encre); text-decoration: none; }
.fcm-tete { display: flex; align-items: flex-end; gap: 4px 16px; flex-wrap: wrap; }
.fcm-tete .titres { flex: 1; min-width: 220px; }
.fcm-tete h1 { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.fcm-tete .sous { color: var(--encre-2); margin-top: 2px; }
.fcm-brouillon { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--encre-2); padding-bottom: 3px; }
.fcm-brouillon span:empty { display: none; }
.fcm-avis { padding: 10px 14px; border-radius: 10px; background: var(--fond-2); color: var(--encre-2); font-size: 14px; }
.fcm-gris { color: var(--encre-2); }
.fcm-aide { color: var(--encre-2); font-size: 13.5px; }
.fcm-erreur { color: var(--t-rouge); font-weight: 700; font-size: 14px; scroll-margin: 120px 0; }
.fcm-etq { display: block; font-size: 14.5px; font-weight: 800; }
.fcm .lien.fcm-sous { align-self: flex-start; font-size: 14px; }
.fcm input.mono::placeholder { font-family: var(--police); letter-spacing: 0; }

/* Les cartes */
.fcm-carte { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.fcm .carte-titre { margin-bottom: 0; }
.fcm .carte-titre h2 { font-size: 16px; font-weight: 800; }
.fcm-trois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 172px; gap: 14px; align-items: start; }
.fcm-doublon { color: var(--t-rouge); font-weight: 600; font-size: 13px; }
.fcm-doublon:empty { display: none; }
.fcm-doublon a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* « Pour qui ? » : la recherche d'un client et ses suggestions, puis le résumé d'une ligne */
.fcm-cherche { display: flex; flex-direction: column; gap: 8px; }
.fcm-sugg { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.fcm-sugg:empty { display: none; }
.fcm-sugg-l { display: flex; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--ligne); background: none; text-align: left; color: inherit; }
.fcm-sugg-l:last-child { border-bottom: 0; }
.fcm-sugg-l:hover { background: var(--survol); }
.fcm-sugg-l:focus-visible { background: var(--selection); outline: none; box-shadow: inset 0 0 0 2px var(--bleu-600); border-radius: 0; }
.fcm-sugg-l b { font-weight: 700; }
.fcm-sugg-l span { color: var(--encre-2); font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#f-client-q { scroll-margin-top: 12px; }
.fcm-sugg-note { padding: 10px 14px; color: var(--encre-2); font-size: 13.5px; }
.fcm-resume { display: flex; align-items: baseline; gap: 4px 18px; flex-wrap: wrap; }
.fcm-resume p { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.fcm-resume p span { color: var(--encre-2); }
.fcm-resume-liens { display: inline-flex; gap: 18px; white-space: nowrap; }
.fcm-coord { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.fcm-coord .fcm-etq { margin-top: 4px; }
.fcm-liens { display: flex; gap: 6px 20px; flex-wrap: wrap; font-weight: 600; }

/* « Plus de détails » : replié, il dit en gris ce qu'il contient (ou ce qui y est déjà rempli) */
.fcm-plus > summary { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; list-style: none; }
.fcm-plus > summary::-webkit-details-marker { display: none; }
.fcm-plus > summary b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.fcm-plus > summary .fcm-gris { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcm-chevron { margin-left: auto; display: inline-flex; transition: transform var(--vite); }
.fcm-plus[open] > summary .fcm-chevron { transform: rotate(90deg); }
.fcm-plus-corps { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fcm-groupe { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ligne); min-width: 0; }
.fcm-groupe-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fcm-groupe-tete b { font-size: 14.5px; font-weight: 800; }
.fcm-groupe-tete .fcm-gris { font-size: 13.5px; }
.fcm-frais { display: flex; flex-direction: column; gap: 8px; max-width: 470px; margin-top: 4px; }
.fcm-frais-l { display: grid; grid-template-columns: minmax(0, 1fr) 150px 32px; gap: 8px; align-items: center; }
.fcm-frais-l > b { text-align: right; padding-right: 38px; }
.fcm-frais-l .entree.num { text-align: right; font-variant-numeric: tabular-nums; }
.fcm-colis { display: flex; align-items: center; gap: 10px; }
.fcm-colis .entree { flex: 1; min-width: 0; max-width: 430px; }
.fcm-colis .fcm-gris { font-size: 13.5px; white-space: nowrap; }
.fcm-colis .fcm-gris:empty { display: none; }
.fcm-depart { margin-top: 6px; }

/* La barre du bas : elle reste visible, avec le total et le seul bouton principal de l'écran */
.fcm-barre { position: sticky; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 10px 20px; padding: 12px 14px 12px 20px; background: var(--surface); border: 1px solid var(--bord-fort); border-radius: var(--rayon-l); box-shadow: 0 0 0 14px var(--fond); }
.fcm-barre-total { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fcm-barre-total span { color: var(--encre-2); font-size: 14px; font-weight: 600; }
.fcm-barre-total b { font-size: 20px; font-weight: 800; white-space: nowrap; }
.fcm-barre-total small { color: var(--encre-2); font-size: 13.5px; }
.fcm-barre-total small:empty { display: none; }
.fcm-barre-total .lien { font-size: 13.5px; margin-left: -4px; }
.fcm-barre .lien { white-space: nowrap; }
.fcm-barre .btn-primaire { height: 44px; padding: 0 22px; }
.fcm-encore { display: none; text-align: center; }
/* Les notifications passent au-dessus de la barre, sans la recouvrir ; un champ atteint au clavier ne s'arrête pas dessous. */
body:has(.fcm-barre) #toasts { bottom: 98px; }
html:has(.fcm-barre) { scroll-padding-bottom: 104px; }

/* ───────── L'éditeur d'articles (formulaire et fiche) : une ligne par article sur grand écran, de petites cartes dès que la place manque ───────── */
.art-zone { container: art / inline-size; display: flex; flex-direction: column; min-width: 0; }
.art-lignes { display: flex; flex-direction: column; --art-cols: minmax(0, 1fr) 76px 112px 56px 98px 112px 32px; }
.art-lignes.sans-prix { --art-cols: minmax(0, 1fr) 84px 130px 60px 112px 32px; }
.art-lignes.sans-dest { --art-cols: minmax(0, 1fr) 84px 130px 60px 104px 32px; }
.art-lignes.sans-prix.sans-dest { --art-cols: minmax(0, 1fr) 96px 150px 64px 32px; }
.art-entete, .art-ligne { display: grid; grid-template-columns: var(--art-cols); gap: 6px 8px; align-items: center; }
.art-entete { font-size: 13px; font-weight: 700; color: var(--encre-2); padding: 0 2px 4px; }
.art-ligne { padding: 4px 0; }
.art-lignes input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bord-fort); background: var(--surface); transition: border-color var(--vite), box-shadow var(--vite); }
.art-lignes input:focus { outline: none; border-color: var(--bleu-500); box-shadow: 0 0 0 3px var(--halo); }
.art-lignes input:disabled { background: var(--fond-2); color: var(--encre-3); }
.art-lignes input.num { text-align: right; font-variant-numeric: tabular-nums; }
.art-nom { position: relative; display: flex; align-items: center; min-width: 0; }
.art-nom input { font-weight: 600; }
.art-nom input::-webkit-calendar-picker-indicator { display: none !important; }
.art-nom:has(a) input { padding-right: 32px; }
.art-nom a { position: absolute; right: 10px; color: var(--bleu-600); display: grid; }
.art-prix, .art-qte { position: relative; display: block; min-width: 0; }
.art-prix input { padding-right: 26px; }
.art-prix i, .art-qte i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--encre-3); pointer-events: none; }
/* « × » devant la quantité : seulement quand l'en-tête des colonnes n'est plus là pour la nommer. */
.art-qte i { display: none; right: auto; left: 10px; }
.dest-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 40px; padding: 3px; border-radius: 10px; background: var(--fond-2); border: 1px solid var(--bord); min-width: 0; }
.dest-toggle button { min-width: 0; padding: 0 4px; border: 0; border-radius: 7px; background: none; color: var(--encre-2); font-size: 13px; font-weight: 600; }
.dest-toggle button.on { background: var(--surface); color: var(--encre); font-weight: 700; box-shadow: 0 0 0 1px var(--bord-fort); }
.dest-toggle button:disabled { cursor: default; opacity: .6; }
.art-plus { justify-self: end; }
.btn-icone.sm.art-plus { width: 32px; height: 32px; }
.art-mention { grid-column: 1 / -1; padding: 0 2px 2px; font-size: 13px; color: var(--encre-2); }
.art-zone > .art-mention { padding: 6px 2px 0; }
.art-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 2px 0; border-top: 1px solid var(--ligne); }
.art-total > span { color: var(--encre-2); min-width: 0; }
.art-total > span > b { color: var(--encre); font-weight: 800; margin-right: 6px; }
.art-total > b { font-size: 16px; font-weight: 800; white-space: nowrap; margin-left: auto; }
.art-liens { display: flex; align-items: baseline; gap: 10px 22px; flex-wrap: wrap; margin-top: 12px; }
.art-tout { margin-left: auto; color: var(--encre-2); font-size: 13.5px; }
/* Dans les fenêtres de l'éditeur (plusieurs tailles, coller une liste, futurs achats) */
.etq.art-jeu { margin-bottom: 6px; }
.art-apercu { font-size: 13.5px; color: var(--encre-2); }
.entree.art-qte-achat { width: 72px; text-align: right; }

/* Place moyenne (la fiche, une tablette) : le nom sur une ligne, le reste dessous */
@container art (max-width: 699px) {
  .art-entete { display: none; }
  .art-lignes { gap: 10px; --art-cols: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 2.4fr) minmax(0, 3fr); }
  .art-lignes.sans-prix { --art-cols: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 3fr); }
  .art-lignes.sans-dest { --art-cols: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 2.4fr); }
  .art-lignes.sans-prix.sans-dest { --art-cols: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.6fr); }
  .art-ligne { position: relative; gap: 8px; padding: 10px; border: 1px solid var(--bord); border-radius: 12px; }
  .art-nom { grid-column: 1 / -1; margin-right: 40px; }
  .art-plus { position: absolute; top: 14px; right: 8px; }
  .art-qte i { display: block; }
  .art-mention { padding: 0 2px; }
  .art-total { flex-wrap: wrap; }
}
/* Téléphone : de petites cartes, des champs de 44 px */
@container art (max-width: 479px) {
  .art-lignes, .art-lignes.sans-prix, .art-lignes.sans-dest, .art-lignes.sans-prix.sans-dest { --art-cols: repeat(6, minmax(0, 1fr)); }
  .art-lignes input { height: 44px; font-size: 16px; }
  .art-nom { margin-right: 50px; }
  .art-plus { top: 11px; right: 8px; }
  .btn-icone.sm.art-plus { width: 42px; height: 42px; }
  .art-taille, .art-couleur, .art-qte, .art-prix { grid-column: span 2; }
  .art-dest { grid-column: span 4; }
  .sans-prix .art-dest { grid-column: span 6; }
  .sans-dest:not(.sans-prix) .art-taille, .sans-dest:not(.sans-prix) .art-couleur, .sans-dest:not(.sans-prix) .art-qte, .sans-dest:not(.sans-prix) .art-prix { grid-column: span 3; }
  .dest-toggle { height: 44px; }
  .dest-toggle button { font-size: 14px; }
}

/* ───────── Formulaire sur téléphone : champs pleine largeur, barre au-dessus de la navigation ───────── */
@media (max-width: 760px) {
  /* La navigation du bas mesure 66 px : la barre s'y pose, pendant le défilement comme à la fin de la page. */
  .vue:has(> .fcm) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .fcm { gap: 12px; }
  .fcm-retour { min-height: 42px; margin: -8px 0 -12px -4px; }
  .fcm-tete h1 { display: none; }
  .fcm-tete .titres { flex: 1 1 100%; min-width: 0; }
  .fcm-tete .titres:not(:has(.sous)) { display: none; }
  .fcm-tete:not(:has(.sous)):has(#etat-brouillon:empty):has(#fcm-brouillon-lien[hidden]) { display: none; }
  .fcm-carte { padding: 14px 16px 16px; }
  .fcm-trois { grid-template-columns: minmax(0, 1fr); }
  .fcm .choix span { height: 44px; }
  .fcm button.lien, .fcm-liens a { min-height: 42px; display: inline-flex; align-items: center; }
  .fcm .btn-icone.sm { width: 42px; height: 42px; }
  .fcm .lien.fcm-sous { margin: -4px 0 -8px; }
  .fcm-resume { align-items: center; gap: 0 18px; margin-bottom: -8px; }
  .fcm-resume p { flex-basis: 100%; }
  .fcm-plus > summary { padding: 15px 16px; }
  .fcm-plus-corps { padding: 0 16px 16px; }
  .fcm-frais-l { grid-template-columns: minmax(0, 1fr) 128px 42px; }
  .fcm-frais-l > b { padding-right: 34px; }
  .fcm-colis { flex-wrap: wrap; }
  .fcm-colis .entree { flex: 1 1 60%; max-width: none; }
  .fcm .art-liens { gap: 0 20px; margin-top: 4px; }
  .art-tout { margin-left: 0; flex: 1 1 100%; }
  .fcm-barre { bottom: calc(66px + env(safe-area-inset-bottom)); margin: 0 -14px; padding: 10px 14px; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .fcm-barre-total { flex-direction: column; gap: 0; }
  .fcm-barre-total span { font-size: 12.5px; }
  .fcm-barre-total small { font-size: 12px; }
  .fcm-barre .btn-primaire { height: 48px; flex: 0 1 auto; font-size: 16px; }
  .fcm-barre button.lien { display: none; }
  .fcm-encore { display: block; margin: -4px 0; }
  body:has(.fcm-barre) #toasts { bottom: calc(148px + env(safe-area-inset-bottom)); }
  html:has(.fcm-barre) { scroll-padding: calc(64px + env(safe-area-inset-top)) 0 calc(150px + env(safe-area-inset-bottom)); }
}

/* ───────── V4 / V5 · statuts : « À récupérer » + pastille verte « Total boutique revenu » ───────── */
.cde-now-statut.cde-now-revenu, .cde-now-statut .statut-duo { flex-wrap: wrap; gap: 6px; }
/* Dans la liste : les deux pastilles restent entières ; le nom et la suite passent à la ligne s'il le faut. */
.cde-l .lg-s:has(> .statut-duo) { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
.cde-l .lg-s > .statut-duo { flex: none; margin-right: 3px; }

/* ───────── Lot 6 — la référence interne en premier, le numéro de commande boutique en second ───────── */
.ref-cmd { font-weight: 700; letter-spacing: -.01em; }
/* Dans les listes, la référence interne est l'identifiant principal : aussi lisible que le nom, pas un petit numéro. */
.lg-t .mono.ref-cmd { font-size: 14.5px; font-weight: 800; }
.tete-fiche h2 .ref-cmd { font-size: inherit; font-weight: 800; }
.cde-copier-ref { vertical-align: middle; color: var(--encre-2); padding: 2px 4px; }
.cde-copier-ref:hover { color: var(--encre); }
.cde-num-boutique .mono { color: var(--encre); }
.num-boutique { color: var(--encre-2); font-size: 13.5px; }
.cde-l .lg-t .cde-sans-num { font-size: 12.5px; font-weight: 600; }